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(border-radius.htc)


View demo and download file


Stylesheet
-----------------
<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(border-radius.htc);
}
.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(border-radius.htc);
}
.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(border-radius.htc);
}
.rel {
margin: 50px 0 0 33px;
padding: 25px;
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}

</style>




Html Code
----------------
<body>
<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>    

<div class="box2">     

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

</div>    

<div class="box3">     

this box is absolutely positioned    

</div>   

</div>  

</body> 
 
More details are on http://code.google.com/p/curved-corner/ 

Labels: ,



1 Comments:

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