CSS Rounded Corner Generator

This generator will create rounded corners in CSS that you can use in your DIV Containers.

Step 1

Select the Inner and Outer background colors.

Outer Background Color :
Inner Background Color :

Step 2

Select the Border and Text colors.

Border Color :
Text Color :

Step 3

Create Rounded Corners.

Rounded Corner Example

CSS Code

#rnd_container {background: #DFD5B9; margin:1px;}  
    .rnd_top, .rnd_bottom {display:block; background:#DFD5B9; font-size:1px;}
    .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;}
    .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;}
    .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
    .rnd_b1 {margin:0 5px; background:#CCCCCC;}
    .rnd_b2 {margin:0 3px; border-width:0 2px;}
    .rnd_b3 {margin:0 2px;}
    .rnd_b4 {height:2px; margin:0 1px;}
    .rnd_content {
    display:block;
    border:0 solid #CCCCCC;
    border-width:0 1px;
    padding: 4px;
    background:#FFFFFF;
    color:#000000;
}

HTML Code

<div id="rnd_container">
<b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b>
<b class="rnd_b3"></b><b class="rnd_b4"></b></b>
<div class="rnd_content"> 
Your Text Goes Here
</div>
<b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b>
<b class="rnd_b2"></b><b class="rnd_b1"></b></b>
</div>