Thread: Rounded Corners Box With Css

nice..

Im guess the code goes in themes folder.

COOL... Thanks

ok, from now i will be remembering to use the "thanks" button

Originally Posted by GumSlone

Here is an example how to create rouded boxes with css.

css:

Code:

.r1, .r2, .r3, .r4, .r5 { display: block; height: 1px; overflow: hidden; font-size:1px;}
.r5 { margin: 0 5px; background-color: #D0CBB8; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
.r4 { margin: 0 4px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
.r3 { margin: 0 3px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
.r2 { margin: 0 2px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
.r1 { margin: 0 1px; background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
#rounded-box { margin:3px 0em; }
.inner-box { background-color: #F1F0ED; border-left:1px solid #D0CBB8;border-right:1px solid #D0CBB8;}
#rounded-box .inner-box { padding: 0px 7px;}

usage

Code:

<div id='rounded-box'><b class='r5'><b class='r3'><b class='r2'><b class='r1'><b class='r1'> 
<div class='inner-box'>
Your content here

</div> <b class='r1'><b class='r1'><b class='r2'><b class='r3'><b class='r5'></div>

wow gum this really looks awesome on your toplist. Great job man

anyway to do this in a simplified code like 1 tag... 1 id tag and 4 class tags is bit messy

why there 5 class tags lol code i hav seen uses 4 lol

PHP Code:

.rtop * {display:block; height:1px; overflow:hidden; background:#<?=$navcolor?>;}
.r1 {margin:0 5px;}
.r2 {margin:0 3px;}
.r3 {margin:0 2px;}
.r4 {margin:0 1px; height: 2px;}