how to do CSS Rounded Corners In All Browsers?
Been playing around ad thought to share in case some of you out there don’t know how to do it
his will depends on how did you tag your html, but for a div with a class of “rounded-corners” like this
|
1 |
<div class="rounded-corners">Some div content here.</div> |
you can add this styling to your CSS file to give you a 10px rounded corners
— Firefox, Safari & Chrome —
|
1 2 3 4 5 6 |
.rounded-corners { -moz-border-radius:10px; / Firefox -webkit-border-radius:10px; / Safari and chrome -khtml-border-radius:10px; / Linux browsers border-radius:10px; / CSS3 } |
am not sure if IE supports it or no but found a hack online so thougt to add it just in case.
you can use the hack by downloading this file here
http://code.google.com/p/curved-corner/downloads/list
extract the zipped file then add the border-radius.htc to your css folder then add the following line to your styling
behavior: url(/css/border-radius.htc);
so the end result would look like this
|
1 2 3 4 5 6 7 |
.rounded-corners { -moz-border-radius:10px; /* Firefox */ -webkit-border-radius:10px; /* Safari and chrome */ -khtml-border-radius:10px; /* Linux browsers */ border-radius:10px; /* CSS3 */ behavior: url(/css/border-radius.htc); /* IE hack */ } |