CSS ROUNDEd CORNER GENERATOR

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

Outer Background Color: Click Here to Pick up the color
Inner Background Color: Click Here to Pick up the color
Border Color: Click Here to Pick up the color
Text Color: Click Here to Pick up the color
 

 

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>