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
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/
1 Comments:
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