Friday, October 22, 2010

Rounded corner HTML elements using CSS3 (with IE 6.0)

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css 

.curved { -moz-border-radius:10px; / Firefox / -webkit-border-radius:10px; / Safari and chrome / -khtml-border-radius:10px; / Linux browsers / border-radius:10px; / CSS3 / }
Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(

View demo and download file

<style type="text/css">
body {
background-color: #fff;
font: normal 11pt Trebuchet MS,Arial,sans-serif;
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(;
.box2 {
background: transparent url(ashera.jpg); no-repeat top left;
width: 420px;
height: 220px;
margin: 0 auto 35px auto;
padding: 30px;
color: #fff;
font-weight: bold;
border: 11px solid #35b70e;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
behavior: url(;
.box3 {
background-color: #ddd;
width: 210px;
height: 30px;
padding: 20px;
position: absolute;
top: 5px; left: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior: url(;
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */


Html Code
<p>Not just divs, but any element*</p>
<div class="rel">
<div class="box1">
lorem ipsum dolor sit amet lorem ipsum dolor sit 

amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet     


<div class="box2">     

this cat is a hybrid of domestic and wild breeds :)    


<div class="box3">     

this box is absolutely positioned    



More details are on 

Labels: ,


At October 28, 2010 at 7:52 AM , Blogger maycatdecal said...

I'm vietnamese very excited to be familiar with you and I like to learn many things from the you.


Post a Comment

Subscribe to Post Comments [Atom]

<< Home