To make the Round Corner box we can follow these steps:
1. Save this code into round.css file
div#toolbar-box {
background: none repeat scroll 0 0 #F7F7F7;
}
div#element-box {
background: none repeat scroll 0 0 #FFFFFF;
}
div#element-box div.section-box div.m {
background: none repeat scroll 0 0 #FBFBFB;
}
div.t, div.b {
height: 6px;
margin: 0;
overflow: hidden;
padding: 0;
}
div.m {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
padding: 0 8px;
}
div#toolbar-box div.m {
padding: 0;
}
div#element-box div.m {
padding: 5px 10px;
}
div#submenu-box div.t {
background: url("../images/j_border.png") repeat-x scroll 0 0 transparent;
}
div#submenu-box div.t div.t {
background: url("../images/j_crn_tr_dark.png") no-repeat scroll 100% 0 transparent;
}
div#submenu-box div.t div.t div.t {
background: url("../images/j_crn_tl_dark.png") no-repeat scroll 0 0 transparent;
}
div#submenu-box div.b {
background: url("../images/j_border.png") repeat-x scroll 0 100% transparent;
}
div#submenu-box div.b div.b {
background: url("../images/j_crn_br_dark.png") no-repeat scroll 100% 0 transparent;
}
div#submenu-box div.b div.b div.b {
background: url("../images/j_crn_bl_dark.png") no-repeat scroll 0 0 transparent;
}
div#toolbar-box, div#element-box div.section-box {
background: none repeat scroll 0 0 #FBFBFB;
}
div#toolbar-box div.t, div#element-box div.section-box div.t {
background: url("../images/j_border.png") repeat-x scroll 0 0 transparent;
}
div#toolbar-box div.t div.t, div#element-box div.section-box div.t div.t {
background: url("../images/j_crn_tr_med.png") no-repeat scroll 100% 0 transparent;
}
div#toolbar-box div.t div.t div.t, div#element-box div.section-box div.t div.t div.t {
background: url("../images/j_crn_tl_med.png") no-repeat scroll 0 0 transparent;
}
div#toolbar-box div.b, div#element-box div.section-box div.b {
background: url("../images/j_border.png") repeat-x scroll 0 100% transparent;
}
div#toolbar-box div.b div.b, div#element-box div.section-box div.b div.b {
background: url("../images/j_crn_br_med.png") no-repeat scroll 100% 0 transparent;
}
div#toolbar-box div.b div.b div.b, div#element-box div.section-box div.b div.b div.b {
background: url("../images/j_crn_bl_med.png") no-repeat scroll 0 0 transparent;
}
div#element-box div.t {
background: url("../images/j_border.png") repeat-x scroll 0 0 transparent;
}
div#element-box div.t div.t {
background: url("../images/j_crn_tr_light.png") no-repeat scroll 100% 0 transparent;
}
div#element-box div.t div.t div.t {
background: url("../images/j_crn_tl_light.png") no-repeat scroll 0 0 transparent;
}
div#element-box div.b {
background: url("../images/j_border.png") repeat-x scroll 0 100% transparent;
}
div#element-box div.b div.b {
background: url("../images/j_crn_br_light.png") no-repeat scroll 100% 0 transparent;
}
div#element-box div.b div.b div.b {
background: url("../images/j_crn_bl_light.png") no-repeat scroll 0 0 transparent;
}
2. Now make HTML for our rounded box
Your content goes here..........
3. Dowload these images for corner and body of the box
