Home » CSS Generators » CSS Rounded Corner Generator

CSS Rounded Corner Generator

This generator will create rounded corners in CSS that you can use in your DIV Containers. Compatible with almost all web hosting plans.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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>