CSS and rounded corner example

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.

Leave a Reply

Your email address will not be published. Required fields are marked *