This CSS model creates a box with rounded corner without any graphics.
In the header of the box you can use a single color for a simple background, or you can put here an image to make a gardient background.
CSS model is compatible with the following browsers: IE 6+, FF 1.5+, Opera 8.5+

Example

title

content

long-long-long-long text in the head

content

<div class="corner_box">
    <b class="corner_top_open">
        <b class="c_b"><b class="c1_f"></b></b>
        <b class="c_b"><b class="c2_f"></b></b>

        <b class="c_b"><b class="c3_f"></b></b>
        <b class="c_b"><b class="c4_f"></b></b>
        <b class="c_b"><b class="c5_f"></b></b>

        <b class="c_b"><b class="c6_f"></b></b>
        <b class="c_b"><b class="c7_f"></b></b>
        <b class="c_b"><b class="c8_f"></b></b>	
        <b class="c_b"><b class="c9_f"></b></b>	
        <b class="c_b"><b class="c10_f"></b></b>	
    </b>

    <div class="corner_top_close">
        <div class="corner_box_title">
            title
        </div>
    </div>
    <div class="corner_box_content">
        content
    </div>

    <b class="corner_bottom">
        <b class="c_b"><b class="c10_f"></b></b>	
        <b class="c_b"><b class="c9_f"></b></b>	
        <b class="c_b"><b class="c8_f"></b></b>	
        <b class="c_b"><b class="c7_f"></b></b>

        <b class="c_b"><b class="c6_f"></b></b>
        <b class="c_b"><b class="c5_f"></b></b>
        <b class="c_b"><b class="c4_f"></b></b>

        <b class="c_b"><b class="c3_f"></b></b>
        <b class="c_b"><b class="c2_f"></b></b>
        <b class="c_b"><b class="c1_f"></b></b>

    </b>
</div> 	
		

corner_box

width of the box

	.corner_box {
		width: 200px;
		}

corner_top_open

background of the box up to 10px height, simple color or an image (gardient background)

	.corner_top_open *{
		display: block;
		height: 1px;
		overflow: hidden;
		background-image: url(gr.gif);
}

corner_top_close

the bottom part of the header, in case of long title this part is responsible for vertical flexibility.

	.corner_top_close {
		background-image: url(gr.gif);
		border-left: 1px solid #cc3333;
		border-right: 1px solid #cc3333;
	}

corner_box_title

text in the header

	.corner_box_title {
		background: transparent;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		position: relative;
		top: -7px;
		left: 0px;
		font-weight: bold;
		color: #fff; 
	} 

corner_box_content

content of the box

	.corner_box_content {
		border-left: 1px solid #cc3333;
		border-right: 1px solid #cc3333;
		padding: 10px;
		padding-top: 5px;
		font-weight: normal;
		background: #fff;
		padding-bottom: 0px;
		margin-top: -4px;
	}

corner_bottom

bottom part of the box with 10px height

	.corner_bottom *{
		display: block;
		height: 1px;
		overflow: hidden;
		background: #fff;
	}  

c_b

the color of the background behind the rounded corners

	.c_b {
		margin-left: 0px;
		margin-right: 0px;
		background: #fff;
		z-index: 0;
	}

c1_f .. c10_f

color of the rounded corners, default setting is a 10px width rounded corner. Of course it is possible to make smaller and bigger rounded corners too.

	.c1_f {
		margin-left: 7px;
		margin-right: 7px;
		background: #cc3333;
	}
	.c2_f {
		margin-left: 5px;
		margin-right: 5px;
		border-left: 3px solid #cc3333;
		border-right: 3px solid #cc3333;
	}  
	.c3_f {
		margin-left: 4px;
		margin-right: 4px;
		border-left: 2px solid #cc3333;
		border-right: 2px solid #cc3333;
	}   
	.c4_f {
		margin-left: 3px;
		margin-right: 3px;
		border-left: 2px solid #cc3333;
		border-right: 2px solid #cc3333;
	}   
	.c5_f {
		margin-left: 2px;
		margin-right: 2px;
		border-left: 2px solid #cc3333;
		border-right: 2px solid #cc3333;
	}   
	.c6_f {
		margin-left: 1px;
		margin-right: 1px;
		border-left: 2px solid #cc3333;
		border-right: 2px solid #cc3333;
	}     
	.c7_f {
		margin-left: 1px;
		margin-right: 1px;
		border-left: 1px solid #cc3333;
		border-right: 1px solid #cc3333;
	}     
	.c8_f {
		margin-left: 0px;
		margin-right: 0px;
		border-left: 2px solid #cc3333;
		border-right: 2px solid #cc3333;
	}  
	.c9_f {
		margin-left: 0px;
		margin-right: 0px;
		border-left: 1px solid #cc3333;
		border-right: 1px solid #cc3333;
	}    
	.c10_f {
		margin-left: 0px;
		margin-right: 0px;
		border-left: 1px solid #cc3333;
		border-right: 1px solid #cc3333;
	} 

Download the CSS Rounded Corner Box

download (source and documentation)  |  back