PhpMyBorder - add round corners by CSS
Home Demo Tutorial Template Download
Sitemap Partners
About
Googlefun
Heh, do you notice any funny misplaced ads on my page?
Heh, last week it had alot of farmer products!
Heh, do you notice any funny misplaced ads on my page?
Heh, last week it had alot of farmer products!
ROUND CORNERS
- a winning concept of free, professional and modern webdesign!Round corners using divs and images
Using tables is considered as old fashion by many web communities. There exists an alternative technique to add round corners. If you are “Designing without Tables”, exchange the table with divisions (DIV tags).
First, add these lines to your stylesheet (CSS) :
( change the bolded attributes to customize )
.tl{
background : url(images/1.gif) 0 0 no-repeat;
}
.tr{
background : url(images/2.gif) 100% 0 no-repeat;
padding : 10px;
}
.bl{
background : url(images/3.gif) 0 100% no-repeat #ff0000;
width : 20em;
}
.br{
background : url(images/4.gif) 100% 100% no-repeat;
}
.clear{
font-size : 1px;
height : 1px;
}
background : url(images/1.gif) 0 0 no-repeat;
}
.tr{
background : url(images/2.gif) 100% 0 no-repeat;
padding : 10px;
}
.bl{
background : url(images/3.gif) 0 100% no-repeat #ff0000;
width : 20em;
}
.br{
background : url(images/4.gif) 100% 100% no-repeat;
}
.clear{
font-size : 1px;
height : 1px;
}
(download the gif-images from the privious page)
The HTML code generating round corners using divs and images:
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
Round corners using divs and images
</div>
</div>
</div>
</div>
<div class="br">
<div class="tl">
<div class="tr">
Round corners using divs and images
</div>
</div>
</div>
</div>
It will display like this :
Round corners using divs and images
Last update 23. nov. 2005
