I know how to generate rounded corners using images. But please have a look at the link :-
http://roundedbox.andreas-kalt.de/
The rounded corners on all four corners are all images, but my question is how are those borders开发者_开发问答 in the middle done? Those green color borders that surround the whole div.
The tutorial is given but it is German :(. Also i don't want to use Css3 like -webkit-border-radius etc as they are not yet supported in IE
Thanks in advance :)
The whole thing is done with a 4 background images here is the css
roundbox-tr {
margin:15px auto;
padding:0;
background:url("roundbox_tr.gif") no-repeat right top;
width: 90%;
}
/* top-left corner and left side */
.roundbox-tl {
margin:0;
padding:0;
background: url("roundbox_tl.gif") no-repeat left top;
}
/* bottom-right corner and bottom side */
.roundbox-br {
margin:0;
padding:0;
background: url("roundbox_br.gif") no-repeat right bottom;
}
/* bottom-left corner */
.roundbox-bl {
margin:0;
padding:0;
background: url("roundbox_bl.gif") no-repeat left bottom;
}
They are used images for border. Use firebug addons in mozilla and check that.
精彩评论