Tuesday, July 3, 2007

How to create rounded corners without JavaScript only through css

let me explain suppose you have a blah div now how to show blah div rounded
first define an other div abc div than put your blah div inside abc div.
now use this code
#abc {width:500px;background-color:#FF0000;padding:5px;}
now no need to define blah div as blah name than use this code for rounded corner for your css

.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#ffffff;

}
.spiffy1{
border-right:1px solid #ffffff;
padding-right:1px;
margin-right:3px;
border-left:1px solid #ffffff;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
}
.spiffy5{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
}
.spiffy_content{
padding:0px 5px;
background:#ffffff;
}
now how to define rounded div inside your html page i am using here <> for {}
{div id="abc"}
{div}
{b class="spiffy"}
{b class="spiffy1"}{b}{/b}{/b}
{b class="spiffy2"}{b}{/b}{/b}
{b class="spiffy3"}{/b}
{b class="spiffy4"}{/b}
{b class="spiffy5"}{/b}
{/b} {div class="spiffy_content"}
{div id="maincontent"}
{/div}
<--either you can create a new div where you can use your content
{/div}
{b class="spiffy"}
{b class="spiffy5"}{/b}
{b class="spiffy4"}{/b}

{b class="spiffy3"}{/b}
{b class="spiffy2"}{b}{/b}{/b}
{b class="spiffy1"}{b}{/b}{/b}
{/b}
{/div}
{/div}

No comments: