How can I create the following html/css style (rounded corners, basic background-color) highlighted in red box:
Use the border-radius CSS property to create rounded borders:
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
You can leave out the prefixes, because Firefox 3.6 or old webkit browsers are almost extinct.
Although it's possible to get rounded corners in OldIE (IE8-) using divs+images or PIE.htc, I recommend against it: PIE is not very reliable, and adding several HTML hacks just to get something to work in old IE is a waste.
See also: MDN: border-radius.
Related
This question already has answers here:
Remove Default round border of <select> element in Mac OS Browser:Chrome
(4 answers)
Closed 6 years ago.
I have a select box which have a CSS property:
border: 1px;
This works well at Chrome but I have a problem with Safari. It is not fit to its container:
When I set CSS to:
border: 0px;
Problem is fixed:
However when border is set to 0 border totally disappears at Chrome.
How can I fix that problem? (setting that property only for Safari or any other ways).
This post shows how you can target different browsers:
-webkit-border-radius: 0; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 0; /* Firefox 1-3.6 */
border-radius: 0; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
This question already has answers here:
Support for "border-radius" in IE
(11 answers)
Closed 8 years ago.
How to use border-radius in IE.(All Browsers)
because firefox,chrome support border-radius but how to use for IE?
you need try this:
.my-block {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
/* Для плохих IE */
behavior: url(border-radius.htc); /*IE border-radius */
}
Fortunately, IE can be quite beautiful to win his own means. One of my favorite solutions using VML and behaviour - curved-corner. To use merge border-radius.htc, we add next to CSS and use the following code: Spent time
I have a div with a background image that I am rotating. Below is my css rules to rotate it:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.
To replicate this issue paste the following into an HTML file and look at it in IE:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.
I'm still looking for an official source for this issue.
#geoffs3310, I feel your pain.
I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.
background-color: black;
And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.
Eliminates the jagginess buttons get after skew rotations are applied (kudos):
transform-style: preserve-3d;
Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):
transform: perspective(0);
And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:
outline: 1px solid transparent;
To get round this issue i used box shadows which seemed to work and make the edges smooth
I want exact piece of code to get rounded corners for this page http://www.freecsstemplates.org/preview/fotofolium/. When I use PIE.htc file, it's working only when I declare position:relative; everywhere I used it & that's disturbing the layout. Can someone suggest code that works without position attribute for that template.
I didn't give moz & webkit but,it's working in others like safari,chrome. I gave only
border-radius:5px;
behavior: url("PIE.htc");
position: relative;
to make it work in every browser. It's not working only in IE if I remove position attribute even with PIE.htc.I used moz, webkit for border box, maybe so workin with FF, Opera etc.
Use border-radius
Because IE doesn't support border-radius, you can use CSS3 PIE. Thats where the PIE.htc came from.
You can set the CSS declaration for the rounded corners for all browsers, and use an HTC for old versions of Internet Explorer.
Working example for the div with rounded corners with no position set!
CSS
.curved {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari and chrome */
-khtml-border-radius:10px; /* Linux browsers */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc) /* Internet Explorer */
}
.menu_buttons {
margin: 40px;
width: 100px;
line-height: 1.1em;
float: left;
vertical-align: middle;
cursor: pointer;
text-align: center;
font: 0.9em Arial, Helvetica, sans-serif;
color: #fff;
background-color: pink;
border: 1px solid red;
}
EXAMPLE HTML
<div class="menu_buttons curved">.menu_buttons element</div>
Download the border-radius.htc, and check out the CSS curved corner Demos and Page .
TESTED ON
Windows XP Profissional versão 2002 Service Pack 3
Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m
K-Meleon 1.5.4
Windows 7 Home Edition Service Pack 1
Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)
How to create a rounded corner background box using CSS?
Use this css:
.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4 */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
And then simply use the class in your HTML like this
<div class="box_round" style="background-color:red">This is a test</div>
I added the background-color:red - just for test puporposes so that you can see the rounded corenrs.
HTH
This is only supported in CSS 3.
Take a look at the CSS3 PIE project. It may help you with the problems related to CSS3 on old IE versions.