Rounded Corners Box With Css

[GumSlone]

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

css:

.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

<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>

[Guest]

nice..

[Guest]

Im guess the code goes in themes folder.

[nclemale36]

not everyone uses lava and wapdesire reece . think gums has posted as a general tip .

[GumSlone]

COOL... Thanks

Next time please use the "thanks" button.....

[quiksilverX]

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

css:

.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

<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

[ori]

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

[ori]

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

.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;}

[metulj]

how to do this if we dont have css for example in methos version 2 how to do this it does not containt css file

just cos you aren't able to see *.css file..
that doens't mean there isnt one

[sanju]

Thanks friend, its a most useful post for devlopers.

[icedroplet1987]

i am not getting how to use.. i copy pasted the code u gave in css file n put that in my public_html .. n used the usage code in index but still not working..

[opticalpigion]

i am not getting how to use.. i copy pasted the code u gave in css file n put that in my public_html .. n used the usage code in index but still not working..

<style type="text/css">
.opticalpigion{display:block}
.opticalpigion *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#FFFFFF}
.opticalpigion1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #776e6e;
  border-right:1px solid #776e6e;
  background:#c3bfbf}
.opticalpigion2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #281a1a;
  border-right:1px solid #281a1a;
  background:#d1cece}
.opticalpigion3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #d1cece;
  border-right:1px solid #d1cece;}
.opticalpigion4{
  border-left:1px solid #776e6e;
  border-right:1px solid #776e6e}
.opticalpigion5{
  border-left:1px solid #c3bfbf;
  border-right:1px solid #c3bfbf}
.opticalpigionfg{
  background:#FFFFFF}
</style>

<div>
  <b class="opticalpigion">
  <b class="opticalpigion1"><b></b></b>
  <b class="opticalpigion2"><b></b></b>
  <b class="opticalpigion3"></b>
  <b class="opticalpigion4"></b>
  <b class="opticalpigion5"></b></b>

  <div class="opticalpigionfg">
    content goes here
  </div>

  <b class="opticalpigion">
  <b class="opticalpigion5"></b>
  <b class="opticalpigion4"></b>
  <b class="opticalpigion3"></b>
  <b class="opticalpigion2"><b></b></b>
  <b class="opticalpigion1"><b></b></b></b>
</div>

[modfiles]

heres another one too.
Not actually a rounded corner but close it.
its a notched corners

/* CSS File */
.feature {
    border:solid #647aae;
     border-width:0 1px;
    background:#b0c0e6;
}
.feature div {
  position:relative;
  top: -1px;
  left: 0;
  border:solid #647aae;
  border-width:1px 0 0;
}
.feature div div {
    top: 2px;
    border-width:0 0 1px;
    padding: .3em .3em .1em;
}

Usage:

    <div class="feature">
        <div>
            <div>
                <p>This is an example of the notched corners as applied to a div container.</p>
                <p>This is an example of the notched corners as applied to a div container.</p>
                <p>This is an example of the notched corners as applied to a div container.</p>
            </div>

        </div>
    </div>

[CreativityKills]

Optical pigeon dats frm my site lmao.

[CreativityKills]

?? D **** u talkn about?