This is the very first CSS rounded corner technique i learned and used. If someone interested can use it without any doubt. Although, it may look like having too many ‘div’ layers in it, it is a good one, not to say works in all browsers well.
CSS code:
.t{background: url('dot_a.gif') 0 0 repeat-x}
.b{background: url('dot_a.gif') 0 100% repeat-x}
.l{background: url('dot_a.gif') 0 0 repeat-y}
.r{background: url('dot_a.gif') 100% 0 repeat-y}
.bl{background: url('rcorner3.gif') 0 100% no-repeat}
.br{background: url('rcorner4.gif') 100% 100% no-repeat}
.tl{background: url('rcorner1.gif') 0 0 no-repeat}
.tr{background: url('rcorner2.gif') 100% 0 no-repeat;padding:10px}
.clear{font-size: 1px;height: 1px}And HTML page:
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
Hi this is rounded cornered rectangle
And finaly you can download images used in this example here.
I’d be posting a new learned rounded cornered technique (which i used to create round cornered rectangle on this site) shortly here. Keep an eye on this post.
