tag:blogger.com,1999:blog-41292032157392552252012-02-15T23:29:09.583-08:00Affordable web design, SEO and Internet Marketing services.Shailesh Mauryahttp://www.blogger.com/profile/10142211557956260197noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-4129203215739255225.post-48445332112230268822011-01-13T22:21:00.000-08:002011-01-13T22:32:56.561-08:00<br /><br />To make the Round Corner box we can follow these steps:<br /><span style="font-weight: bold;"><br />1. Save this code into round.css file</span><br /><br /><br />div#toolbar-box {<br /> background: none repeat scroll 0 0 #F7F7F7;<br />}<br />div#element-box {<br /> background: none repeat scroll 0 0 #FFFFFF;<br />}<br />div#element-box div.section-box div.m {<br /> background: none repeat scroll 0 0 #FBFBFB;<br />}<br />div.t, div.b {<br /> height: 6px;<br /> margin: 0;<br /> overflow: hidden;<br /> padding: 0;<br />}<br />div.m {<br /> border-left: 1px solid #CCCCCC;<br /> border-right: 1px solid #CCCCCC;<br /> padding: 0 8px;<br />}<br />div#toolbar-box div.m {<br /> padding: 0;<br />}<br />div#element-box div.m {<br /> padding: 5px 10px;<br />}<br />div#submenu-box div.t {<br /> background: url("../images/j_border.png") repeat-x scroll 0 0 transparent;<br />}<br />div#submenu-box div.t div.t {<br /> background: url("../images/j_crn_tr_dark.png") no-repeat scroll 100% 0 transparent;<br />}<br />div#submenu-box div.t div.t div.t {<br /> background: url("../images/j_crn_tl_dark.png") no-repeat scroll 0 0 transparent;<br />}<br />div#submenu-box div.b {<br /> background: url("../images/j_border.png") repeat-x scroll 0 100% transparent;<br />}<br />div#submenu-box div.b div.b {<br /> background: url("../images/j_crn_br_dark.png") no-repeat scroll 100% 0 transparent;<br />}<br />div#submenu-box div.b div.b div.b {<br /> background: url("../images/j_crn_bl_dark.png") no-repeat scroll 0 0 transparent;<br />}<br />div#toolbar-box, div#element-box div.section-box {<br /> background: none repeat scroll 0 0 #FBFBFB;<br />}<br />div#toolbar-box div.t, div#element-box div.section-box div.t {<br /> background: url("../images/j_border.png") repeat-x scroll 0 0 transparent;<br />}<br />div#toolbar-box div.t div.t, div#element-box div.section-box div.t div.t {<br /> background: url("../images/j_crn_tr_med.png") no-repeat scroll 100% 0 transparent;<br />}<br />div#toolbar-box div.t div.t div.t, div#element-box div.section-box div.t div.t div.t {<br /> background: url("../images/j_crn_tl_med.png") no-repeat scroll 0 0 transparent;<br />}<br />div#toolbar-box div.b, div#element-box div.section-box div.b {<br /> background: url("../images/j_border.png") repeat-x scroll 0 100% transparent;<br />}<br />div#toolbar-box div.b div.b, div#element-box div.section-box div.b div.b {<br /> background: url("../images/j_crn_br_med.png") no-repeat scroll 100% 0 transparent;<br />}<br />div#toolbar-box div.b div.b div.b, div#element-box div.section-box div.b div.b div.b {<br /> background: url("../images/j_crn_bl_med.png") no-repeat scroll 0 0 transparent;<br />}<br />div#element-box div.t {<br /> background: url("../images/j_border.png") repeat-x scroll 0 0 transparent;<br />}<br />div#element-box div.t div.t {<br /> background: url("../images/j_crn_tr_light.png") no-repeat scroll 100% 0 transparent;<br />}<br />div#element-box div.t div.t div.t {<br /> background: url("../images/j_crn_tl_light.png") no-repeat scroll 0 0 transparent;<br />}<br />div#element-box div.b {<br /> background: url("../images/j_border.png") repeat-x scroll 0 100% transparent;<br />}<br />div#element-box div.b div.b {<br /> background: url("../images/j_crn_br_light.png") no-repeat scroll 100% 0 transparent;<br />}<br />div#element-box div.b div.b div.b {<br /> background: url("../images/j_crn_bl_light.png") no-repeat scroll 0 0 transparent;<br />}<br /><br /><br />2. Now make HTML for our rounded box<br /><br /><br /><br /><br /><br /><meta equiv="Content-Type" content="text/html; charset=utf-8"><br /><title>Untitled Document</title><br /><link rel="stylesheet" href="css/rounded.css" type="text/css"><br /><br /><br /><br /><div id="toolbar-box"><br /> <div class="t"><br /> <div class="t"><br /> <div class="t"></div><br /> </div><br /> </div><br /> <div class="m"><br /> Your content goes here..........<br /> <br /><br /><br /><br /><br /><br /><br /> <div class="clr"></div><br /> </div><br /> <div class="b"><br /> <div class="b"><br /> <div class="b"></div><br /> </div><br /> </div><br /> </div><br /><br /><br /><br /><br />3. Dowload these images for corner and body of the box<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_FZIdyTBpxjQ/TS_tMhAYYII/AAAAAAAAADQ/LPqK-Njf9RQ/s1600/j_border.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 116px; height: 1px;" src="http://4.bp.blogspot.com/_FZIdyTBpxjQ/TS_tMhAYYII/AAAAAAAAADQ/LPqK-Njf9RQ/s320/j_border.png" alt="" id="BLOGGER_PHOTO_ID_5561924864100032642" border="0" /></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_FZIdyTBpxjQ/TS_tmxuZ_rI/AAAAAAAAADY/dTVP3e3qJao/s1600/j_bottom.png"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 135px; height: 11px;" src="http://2.bp.blogspot.com/_FZIdyTBpxjQ/TS_tmxuZ_rI/AAAAAAAAADY/dTVP3e3qJao/s320/j_bottom.png" alt="" id="BLOGGER_PHOTO_ID_5561925315264642738" border="0" /></a><br /><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4129203215739255225-4844533211223026882?l=webtooltech.blogspot.com' alt='' /></div>Shailesh Mauryahttp://www.blogger.com/profile/10142211557956260197noreply@blogger.com0