CSS Style-Editor for rounded corners

Generates a box with rounded corners. You will get four .png image files and the necessary HTML and CSS code to include it in your content.

Radius

Choose the radius for the 4 corners (5-100).

Background Color

Enter the background color of your web page as HEX value. You can also use the ColorPicker.

Box Color

Enter the desired box color as HEX value.

Font Format

edit

Set the font properties for your box.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.

[misc.add3]

/* BasicBox_1{30;FFFFFF;FFCC00;1}*/
/* BasicBox_1 */
.rdcnr_box_1{
	background:#FFCC00;
}
.rdcnr_top_1{
	background:url(/templates/panel_rt_1.png) no-repeat top right;
}
.rdcnr_top_1 div{
	background:url(/templates/panel_lt_1.png) no-repeat top left;
	padding:5px 30px;
}
.rdcnr_bottom_1{
	background:url(/templates/panel_rb_1.png) no-repeat bottom right;
}
.rdcnr_bottom_1 div{
	background:url(/templates/panel_lb_1.png) no-repeat bottom left;
}
.rdcnr_top_1 div, .rdcnr_top_1, .rdcnr_bottom_1 div, .rdcnr_bottom_1{
	width:100%;
	height:30px;
}
.rdcnr_content_1{
	padding:0px 30px;
}
.rdcnr_font_1{
	color:#0033FF;
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
}
/* End */

/* BorderBox_1{5;FFFFCC;CCFF00;CCCC00;10;2}*/
/* BorderBox_1 */
.rdcnr_st_2{
	background:#CCFF00 url(/templates/panel_b_2.png) repeat-x top;
}
.rdcnr_top_2{
	background:transparent url(/templates/panel_rt_2.png) no-repeat top right;
}
.rdcnr_top_2 div{
	background:url(/templates/panel_lt_2.png) no-repeat top left;
	padding:0px 20px;
	height:16px;
}
.rdcnr_top_2, .rdcnr_st_2{
	width:100%;
	height:16px;
}
.rdcnr_sb_2{
	background:#CCFF00 url(/templates/panel_b_2.png) repeat-x bottom;
}
.rdcnr_bottom_2{
	background:transparent url(/templates/panel_rb_2.png) no-repeat top right;
}
.rdcnr_bottom_2 div{
	background:url(/templates/panel_lb_2.png) no-repeat top left;
	padding:0px 20px;
	height:16px;
}
.rdcnr_bottom_2, .rdcnr_sb_2{
	width:100%;
	height:16px;
}
.rdcnr_sm_2{
	background:#CCFF00;
}
.rdcnr_content_2{
	background:transparent url(/templates/panel_b_2.png) repeat-y right;
}
.rdcnr_content_2 div{
	background:url(/templates/panel_b_2.png) repeat-y left;
	padding:0px 20px;
}
.rdcnr_content_2, .rdcnr_sm_2{
	width:100%;
}
.rdcnr_font_2{
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
}
/* End */

/* GradientBox_1{30;FFFFFF;0066FF;FFFF00;100;15;top;left; ;0;3}*/
/* GradientBox_1 */
.rdcnr_box_3{
	background:#FFFF00 url(/templates/panel_grad_3.png) no-repeat top left;
}
.rdcnr_top_3{
	background:url(/templates/panel_rt_3.png) no-repeat top right;
}
.rdcnr_top_3 div{
	background:url(/templates/panel_lt_3.png) no-repeat top left;
	padding:5px 30px;
}
.rdcnr_bottom_3{
	background:url(/templates/panel_rb_3.png) no-repeat bottom right;
}
.rdcnr_bottom_3 div{
	background:url(/templates/panel_lb_3.png) no-repeat bottom left;
}
.rdcnr_top_3 div, .rdcnr_top_3, .rdcnr_bottom_3 div, .rdcnr_bottom_3{
	width:100%;
	height:30px;
}
.rdcnr_content_3{
	padding:0px 30px;
}
.rdcnr_font_3{
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
}
/* End */

/* IndividualBox_1{0,20,20,0;330000;660000;CD5C5C;CC0000;150;20;top;left;FFFFCC;2; ; ; ; ;0;4}*/
/* IndividualBox_1 */
.rdcnr_st_4{
	background:transparent url(/templates/panel_b_4.png) repeat-x top;
}
.rdcnr_top_4{
	background:transparent url(/templates/panel_rt_4.png) no-repeat top right;
}
.rdcnr_top_4 div{
	background:url(/templates/panel_lt_4.png) no-repeat top left;
	padding:0px 12px;
	height:23px;
}
.rdcnr_top_4, .rdcnr_st_4{
	width:100%;
	height:23px;
}
.rdcnr_sb_4{
	background:transparent url(/templates/panel_b_4.png) repeat-x bottom;
}
.rdcnr_bottom_4{
	background:transparent url(/templates/panel_rb_4.png) no-repeat top right;
}
.rdcnr_bottom_4 div{
	background:url(/templates/panel_lb_4.png) no-repeat top left;
	padding:0px 12px;
	height:23px;
}
.rdcnr_bottom_4, .rdcnr_sb_4{
	width:100%;
	height:23px;
}
.rdcnr_sm_4{
	background:transparent;
}
.rdcnr_content_4{
	background:transparent url(/templates/panel_b_4.png) repeat-y right;
}
.rdcnr_content_4 div{
	background:url(/templates/panel_b_4.png) repeat-y left;
	padding:0px 12px 0px 12px;
}
.rdcnr_content_4, .rdcnr_sm_4{
	width:100%;
}
.rdcnr_box_4{
	background:#CC0000 url(/templates/panel_grad_4.png) top left no-repeat;
}
.rdcnr_font_4{
	color:#FFFFCC;
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
	line-height:14px;
	font-variant:small-caps;
}
/* End */

/* CombiBox_1{IndividualBox_24733585,IndividualBox_73147496;5}*/
/* CombiBox_1 */
.rdcnr_box_24733585{
	background:#000066 url(/templates/bg_24733585.jpg) top left no-repeat;
	width:200px;
}
.rdcnr_st_24733585{
	background:transparent url(/templates/panel_b_24733585.png) repeat-x top;
}
.rdcnr_top_24733585{
	background:transparent url(/templates/panel_rt_24733585.png) no-repeat top right;
}
.rdcnr_top_24733585 div{
	background:url(/templates/panel_lt_24733585.png) no-repeat top left;
	padding:0px 12px;
	height:23px;
}
.rdcnr_top_24733585, .rdcnr_st_24733585{
	width:200px;
	height:23px;
}
.rdcnr_sb_24733585{
	background:transparent url(/templates/panel_b_24733585.png) repeat-x bottom;
}
.rdcnr_bottom_24733585{
	background:transparent url(/templates/panel_rb_24733585.png) no-repeat bottom right;
}
.rdcnr_bottom_24733585 div{
	background:url(/templates/panel_lb_24733585.png) no-repeat bottom left;
	padding:0px 12px;
	height:3px;
}
.rdcnr_bottom_24733585, .rdcnr_sb_24733585{
	width:200px;
	height:3px;
}
.rdcnr_sm_24733585{
	background:transparent;
}
.rdcnr_content_24733585{
	background:transparent url(/templates/panel_b_24733585.png) repeat-y right;
}
.rdcnr_content_24733585 div{
	background:url(/templates/panel_b_24733585.png) repeat-y left;
	height:150px; 
	padding:0px 12px 0px 12px;
}
.rdcnr_content_24733585, .rdcnr_sm_24733585{
	width:200px;
}
.rdcnr_font_24733585{
	color:#FFFFCC;
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
	line-height:14px;
	font-variant:small-caps;
}

.rdcnr_box_73147496{
	background:#FFCC33 url(/templates/panel_grad_73147496.png) repeat-x;
	width:200px;
}
.rdcnr_st_73147496{
	background:transparent url(/templates/panel_b_73147496.png) repeat-x top;
}
.rdcnr_top_73147496{
	background:transparent url(/templates/panel_rt_73147496.png) no-repeat top right;
}
.rdcnr_top_73147496 div{
	background:url(/templates/panel_lt_73147496.png) no-repeat top left;
	padding:0px 12px;
	height:3px;
}
.rdcnr_top_73147496, .rdcnr_st_73147496{
	width:200px;
	height:3px;
}
.rdcnr_sb_73147496{
	background:transparent url(/templates/panel_b_73147496.png) repeat-x bottom;
}
.rdcnr_bottom_73147496{
	background:transparent url(/templates/panel_rb_73147496.png) no-repeat bottom right;
}
.rdcnr_bottom_73147496 div{
	background:url(/templates/panel_lb_73147496.png) no-repeat bottom left;
	padding:0px 12px;
	height:23px;
}
.rdcnr_bottom_73147496, .rdcnr_sb_73147496{
	width:200px;
	height:23px;
}
.rdcnr_sm_73147496{
	background:transparent;
}
.rdcnr_content_73147496{
	background:transparent url(/templates/panel_b_73147496.png) repeat-y right;
}
.rdcnr_content_73147496 div{
	background:url(/templates/panel_b_73147496.png) repeat-y left; 
	padding:10px 12px 0px 12px;
}
.rdcnr_content_73147496, .rdcnr_sm_73147496{
	width:200px;
}
.rdcnr_font_73147496{
	color:#000066;
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
	line-height:14px;
	font-variant:small-caps;
}
/* End */

/* IndividualBox_73147496{0 ,0 ,0 ,20 ;000066;FF9900;FFCC00 ;FFCC33;150;0;top;left;FFFFCC ;2;200 ,px ; , ; ; ;0;73147496}*/
/* IndividualBox_73147496 */
.rdcnr_box_73147496{
	background:#FFCC33 url(/templates/panel_grad_73147496.png) repeat-x;
	width:200px;
}
.rdcnr_st_73147496{
	background:transparent url(/templates/panel_b_73147496.png) repeat-x top;
}
.rdcnr_top_73147496{
	background:transparent url(/templates/panel_rt_73147496.png) no-repeat top right;
}
.rdcnr_top_73147496 div{
	background:url(/templates/panel_lt_73147496.png) no-repeat top left;
	padding:0px 12px;
	height:3px;
}
.rdcnr_top_73147496, .rdcnr_st_73147496{
	width:200px;
	height:3px;
}
.rdcnr_sb_73147496{
	background:transparent url(/templates/panel_b_73147496.png) repeat-x bottom;
}
.rdcnr_bottom_73147496{
	background:transparent url(/templates/panel_rb_73147496.png) no-repeat bottom right;
}
.rdcnr_bottom_73147496 div{
	background:url(/templates/panel_lb_73147496.png) no-repeat bottom left;
	padding:0px 12px;
	height:23px;
}
.rdcnr_bottom_73147496, .rdcnr_sb_73147496{
	width:200px;
	height:23px;
}
.rdcnr_sm_73147496{
	background:transparent;
}
.rdcnr_content_73147496{
	background:transparent url(/templates/panel_b_73147496.png) repeat-y right;
}
.rdcnr_content_73147496 div{
	background:url(/templates/panel_b_73147496.png) repeat-y left; 
	padding:10px 12px 0px 12px;
}
.rdcnr_content_73147496, .rdcnr_sm_73147496{
	width:200px;
}
.rdcnr_font_73147496{
	color:#000066;
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
	line-height:14px;
	font-variant:small-caps;
}
/* End */

/* IndividualBox_24733585{20 ,20 ,0 ,0 ;000066;660000;CD5C5C ;CC0000;150;20;top;left;FFFFCC ;2;200 ,px ;150 ,px ;http://as.tcautor.de/www/web1.tcmuster1.de/gallery/background/upload_5137_78AEEDD6-1BFC-1E55-FC4285EFB3EF6FFF_20080919053801.jpg ;no-repeat ;1;24733585}*/
/* IndividualBox_24733585 */
.rdcnr_box_24733585{
	background:#000066 url(/templates/bg_24733585.jpg) top left no-repeat;
	width:200px;
}
.rdcnr_st_24733585{
	background:transparent url(/templates/panel_b_24733585.png) repeat-x top;
}
.rdcnr_top_24733585{
	background:transparent url(/templates/panel_rt_24733585.png) no-repeat top right;
}
.rdcnr_top_24733585 div{
	background:url(/templates/panel_lt_24733585.png) no-repeat top left;
	padding:0px 12px;
	height:23px;
}
.rdcnr_top_24733585, .rdcnr_st_24733585{
	width:200px;
	height:23px;
}
.rdcnr_sb_24733585{
	background:transparent url(/templates/panel_b_24733585.png) repeat-x bottom;
}
.rdcnr_bottom_24733585{
	background:transparent url(/templates/panel_rb_24733585.png) no-repeat bottom right;
}
.rdcnr_bottom_24733585 div{
	background:url(/templates/panel_lb_24733585.png) no-repeat bottom left;
	padding:0px 12px;
	height:3px;
}
.rdcnr_bottom_24733585, .rdcnr_sb_24733585{
	width:200px;
	height:3px;
}
.rdcnr_sm_24733585{
	background:transparent;
}
.rdcnr_content_24733585{
	background:transparent url(/templates/panel_b_24733585.png) repeat-y right;
}
.rdcnr_content_24733585 div{
	background:url(/templates/panel_b_24733585.png) repeat-y left;
	height:150px; 
	padding:0px 12px 0px 12px;
}
.rdcnr_content_24733585, .rdcnr_sm_24733585{
	width:200px;
}
.rdcnr_font_24733585{
	color:#FFFFCC;
	font-family:Verdana,Tahoma,Arial,Helvetica;
	font-size:12px;
	line-height:14px;
	font-variant:small-caps;
}
/* End */

Add this code to your HTML and replace the "Lorem Ipsum ..." with your own content.

/* BasicBox_1 */
<div class="rdcnr_font_1">
	<div class="rdcnr_box_1">
		<div class="rdcnr_top_1">
			<div>
				<b>Lorem ipsum dolor sit amet.</b>
			</div>
		</div>
		<div class="rdcnr_content_1">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.
		</div>
		<div class="rdcnr_bottom_1">
			<div></div>
		</div>
	</div>
</div>
/* End */

/* BorderBox_1 */
<div class="rdcnr_font_2">
	<div class="rdcnr_st_2">
		<div class="rdcnr_top_2"><div></div></div>
	</div>
	<div class="rdcnr_sm_2">
		<div class="rdcnr_content_2">
			<div>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.<br><br>
				Duis vitae nisi. Proin congue dictum leo. Vestibulum cursus. Donec turpis odio, malesuada in, hendrerit a, dictum in, metus. Suspendisse porta convallis risus. Nunc vestibulum est.
			</div>
		</div>
	</div>
	<div class="rdcnr_sb_2">
		<div class="rdcnr_bottom_2"><div></div></div>
	</div>
</div>
/* End */

/* GradientBox_1 */
<div class="rdcnr_font_3">
	<div class="rdcnr_box_3">
		<div class="rdcnr_top_3">
			<div>
				<b>Lorem ipsum dolor sit amet.</b>
			</div>
		</div>
		<div class="rdcnr_content_3">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.
		</div>
		<div class="rdcnr_bottom_3">
			<div></div>
		</div>
	</div>
</div>
/* End */

/* IndividualBox_1 */
<div class="rdcnr_font_4">
	<div class="rdcnr_box_4">
		<div class="rdcnr_st_4">
			<div class="rdcnr_top_4"><div></div></div>
		</div>
		<div class="rdcnr_sm_4">
			<div class="rdcnr_content_4">
				<div>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.
				</div>
			</div>
		</div>
		<div class="rdcnr_sb_4">
			<div class="rdcnr_bottom_4"><div></div></div>
		</div>
	</div>
</div>
/* End */

/* CombiBox_1 */
<div class="rdcnr_font_24733585">
	<div class="rdcnr_box_24733585">
		<div class="rdcnr_st_24733585">
			<div class="rdcnr_top_24733585"><div></div></div>
		</div>
		<div class="rdcnr_sm_24733585">
			<div class="rdcnr_content_24733585">
				<div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="rdcnr_font_73147496">
	<div class="rdcnr_box_73147496">
		<div class="rdcnr_sm_73147496">
			<div class="rdcnr_content_73147496">
				<div>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.
				</div>
			</div>
		</div>
		<div class="rdcnr_sb_73147496">
			<div class="rdcnr_bottom_73147496"><div></div></div>
		</div>
	</div>
</div>
/* End */

/* IndividualBox_73147496 */
<div class="rdcnr_font_73147496">
	<div class="rdcnr_box_73147496">
		<div class="rdcnr_st_73147496">
			<div class="rdcnr_top_73147496"><div></div></div>
		</div>
		<div class="rdcnr_sm_73147496">
			<div class="rdcnr_content_73147496">
				<div>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.
				</div>
			</div>
		</div>
		<div class="rdcnr_sb_73147496">
			<div class="rdcnr_bottom_73147496"><div></div></div>
		</div>
	</div>
</div>
/* End */

/* IndividualBox_24733585 */
<div class="rdcnr_font_24733585">
	<div class="rdcnr_box_24733585">
		<div class="rdcnr_st_24733585">
			<div class="rdcnr_top_24733585"><div></div></div>
		</div>
		<div class="rdcnr_sm_24733585">
			<div class="rdcnr_content_24733585">
				<div>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In orci metus, tincidunt nec, mollis nec, porttitor ac, purus. Curabitur quis leo. Nunc magna neque, lacinia eu, tincidunt non, aliquet sit amet, libero.
				</div>
			</div>
		</div>
		<div class="rdcnr_sb_24733585">
			<div class="rdcnr_bottom_24733585"><div></div></div>
		</div>
	</div>
</div>
/* End */

With rounded-corner.com you can online create CSS for boxes with rounded corners. Click on "Download" to save the result. The use of rounded-corner.com is FREE. If you want to make a donation to support the development of these and other scripts, we would be very grateful indeed - any support is welcome!