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 css
It is possible to create rounded corners without using any images at all. By "painting" HTML elements you can get the round corner effect. One way is to use blocked elements (DIV or B tags).
The code needed is a bit longer than the previous techniques, but since it’s not using graphics (gif) it’s smaller in size (Kb) and will load faster.
First, add these lines to your stylesheet (CSS):
( change the bolded attributes to customize )
.phpMyBorder{
width : 250px;
}
.pmb2, .pmb3, .pmb4,.pmbContent{
background : #ff0000;
border-color : #000000;
}
.pmb1{
background : #000000;
}
.pmb2, .pmb3, .pmb4{
border-style : solid;
border-width : 0 1px;
}
.pmbContent{
display : block;
border-style : solid;
border-width : 0 1px;
}
.pmb1, .pmb2, .pmb3{
height : 1px;
}
.pmb1{
margin : 0 5px;
}
.pmb2{
margin : 0 3px;
border-width : 0 2px;
}
.pmb3{
margin : 0 2px;
}
.pmb4{
height : 2px;
margin : 0 1px;
}
.pmb1, .pmb2, .pmb3, .pmb4{
display : block;
overflow : hidden;
}
.pmb5{
font-size : 1px;
display : block;
overflow : hidden;
height : 1px;
}
.pmbBlock{
display : block;
font-size : 1px;
}
width : 250px;
}
.pmb2, .pmb3, .pmb4,.pmbContent{
background : #ff0000;
border-color : #000000;
}
.pmb1{
background : #000000;
}
.pmb2, .pmb3, .pmb4{
border-style : solid;
border-width : 0 1px;
}
.pmbContent{
display : block;
border-style : solid;
border-width : 0 1px;
}
.pmb1, .pmb2, .pmb3{
height : 1px;
}
.pmb1{
margin : 0 5px;
}
.pmb2{
margin : 0 3px;
border-width : 0 2px;
}
.pmb3{
margin : 0 2px;
}
.pmb4{
height : 2px;
margin : 0 1px;
}
.pmb1, .pmb2, .pmb3, .pmb4{
display : block;
overflow : hidden;
}
.pmb5{
font-size : 1px;
display : block;
overflow : hidden;
height : 1px;
}
.pmbBlock{
display : block;
font-size : 1px;
}
The HTML code generating round corners using divs and css:
<div class="phpMyBorder">
<b class="pmbBlock">
<b class="pmb1"></b>
<b class="pmb2"></b>
<b class="pmb3"></b>
<b class="pmb4"></b>
</b>
<div class="pmbContent">
<b class="pmb5"></b>
Round corners using div and css
<b class="pmb5"></b>
</div>
<b class="pmbBlock">
<b class="pmb4"></b>
<b class="pmb3"></b>
<b class="pmb2"></b>
<b class="pmb1"></b>
</b>
</div>
<b class="pmbBlock">
<b class="pmb1"></b>
<b class="pmb2"></b>
<b class="pmb3"></b>
<b class="pmb4"></b>
</b>
<div class="pmbContent">
<b class="pmb5"></b>
Round corners using div and css
<b class="pmb5"></b>
</div>
<b class="pmbBlock">
<b class="pmb4"></b>
<b class="pmb3"></b>
<b class="pmb2"></b>
<b class="pmb1"></b>
</b>
</div>
It will display like this :
Round corners using div and css
Last update 23. nov. 2005
