Forum Moderators: not2easy
I want to have a div with say the top right corner & bottom left with rounded corners but most of the sites I have seen give examples with all corners rounded I was looking for a white background & gray border.
thanks
does anyone have an example of a table or div with rounded corners without images?
With images, I believe you will need to use JavaScript (perhaps in combination with CSS) to create many (small) DIVs in order to 'simulate' rounded corners. You could try googling for 'nifty corners'?
I hear CSS3 (?) will be able to do rounded corners WITHOUT images, but for now you're stuck with images. And it shouldn't be too many, or require JS - my example provides bordered round edges. Basically the top and bottom rows with horizontal borders contain a left and right floated corner, and two nested divs hold the left and right borders. "inner_content" is where you apply padding for the content. You only need one "circle" for the corner image, and position it accordingly. Total 5 images.
.clr { clear: both; }
#main {
width: 850px;
margin:auto;
background: #ffffff url(/images/vert-bg.gif) top left repeat-y;
}
#inner {
background: url(/images/vert-bg.gif) top right repeat-y;
padding: 0;
margin:0;
}
#inner_content { padding: 18px; }
#head_rule {
width:100%;
height: 24px;
background: url(/images/top-rule-bg.gif) top left repeat-x;
}
#foot_rule {
width:100%;
height: 23px;
background: url(/images/bot-rule-bg.gif) bottom left repeat-x;
}
/* these are the corners, legend: "ctl=corner top left", etc. */
#ctl, #ctr, #cbl, #cbr {
height: 24px;
width: 24px;
font-size: 2px;
margin:0;
padding:0;
background:url(/images/corner.gif);
}
#ctl,#cbl { float: left; }
#ctr,#cbr { float: right; }
#ctl { background-position: 0 0; }
#ctr { background-position: 12px 0; }
#cbl { background-position: 0 -12px; }
#cbr { background-position: -12px -12px; }
<div id="main">
<div id="head_rule"><div id="ctl"></div><div id="ctr"></div></div>
<div id="inner">
<div id="inner_content">
<h1>HEADING</h1>
<p> Content content content content content content
content content content content content content</p>
<p> Content content content content content content
content content content content content content</p>
<p> Content content content content content content
content content content content content content</p>
<div class="clr"></div>
</div> <!-- end inner content -->
</div> <!-- end inner -->
<div id="foot_rule"><div id="cbl"></div><div id="cbr"></div></div>
</div>
This was quick-pasted from an existing project, it may not work verbatim, but should.
.rounded {margin-bottom:1.8em; line-height:1.3; clear:both;}
.rinner {display:block; border-style:solid; border-width:0;}
/* alter all and only the lines beginning .cs1 to change the colors used for fill and borders */
/* in this sample the border color is #556666 and the fill color is #f2f2f2 */
.rt, .rb, .r1, .r2, .r3, .r4 {display:block; overflow:hidden; background-color:transparent; font-size:1px;}
.cs1 .rt, .cs1 .rb, .cs1 .r1, .cs1 .r2, .cs1 .r3, .cs1 .r4 {border-color:#f2f2f2; background-color:transparent;}
.r1, .r2, .r3 {height:1px;}
.r4 {height:2px;}
.r2, .r3, .r4 {border-style:solid; border-width:0 1px; }
/* set rounding for any one, two, three, or all four corners in any combination (or none of these, which gives a rectangle with other properties */
/* the nine classes to trigger rounding are: .all, .top, .bot, .lft, .rgt, .tl, .tr, .bl, .br with repetition and redundancy OK */
.all .r1, .top .rt .r1, .bot .rb .r1, .lft .rt .r1, .lft .rb .r1, .tl .rt .r1, .bl .rb .r1 {margin-left:5px;}
.all .r2, .top .rt .r2, .bot .rb .r2, .lft .rt .r2, .lft .rb .r2, .tl .rt .r2, .bl .rb .r2 {margin-left:3px; border-left-width:2px;}
.all .r3, .top .rt .r3, .bot .rb .r3, .lft .rt .r3, .lft .rb .r3, .tl .rt .r3, .bl .rb .r3 {margin-left:2px;}
.all .r4, .top .rt .r4, .bot .rb .r4, .lft .rt .r4, .lft .rb .r4, .tl .rt .r4, .bl .rb .r4 {margin-left:1px;}
.all .r1, .top .rt .r1, .bot .rb .r1, .rgt .rt .r1, .rgt .rb .r1, .tr .rt .r1, .br .rb .r1 {margin-right:5px;}
.all .r2, .top .rt .r2, .bot .rb .r2, .rgt .rt .r2, .rgt .rb .r2, .tr .rt .r2, .br .rb .r2 {margin-right:3px; border-right-width:2px;}
.all .r3, .top .rt .r3, .bot .rb .r3, .rgt .rt .r3, .rgt .rb .r3, .tr .rt .r3, .br .rb .r3 {margin-right:2px;}
.all .r4, .top .rt .r4, .bot .rb .r4, .rgt .rt .r4, .rgt .rb .r4, .tr .rt .r4, .br .rb .r4 {margin-right:1px;}
/* set "filled" to fill the rounded box with fill-color */
.cs1 .filled .rinner, .cs1 .filled .r1, .cs1 .filled .r2, .cs1 .filled .r3, .cs1 .filled .r4 {background-color:#f2f2f2; border-color:#f2f2f2;}
/* or set "darkfill" to fill the rounded box with border-color */
.cs1 .darkfill .rinner, .cs1 .darkfill .r1, .cs1 .darkfill .r2, .cs1 .darkfill .r3, .cs1 .darkfill .r4 {background-color:#556666; border-color:#556666;}
/* and/or set "border" to add a one-px border of border-color (filled/darkfill or not) */
.border .rinner {border-style:solid; border-width:0 1px;}
.cs1 .border .rinner {border-color:#556666;}
.cs1 .border .r2, .cs1 .border .r3, .cs1 .border .r4 {border-color:#556666;}
.cs1 .border .r1 {background-color:#556666;}
/* and/or set "twide" for wide border at top of border-color */
.twide .rinner {border-top-style:solid; border-top-width:1px;}
.cs1 .twide .rinner {border-top-color:#556666;}
.cs1 .twide .rt .r1, .cs1 .twide .rt .r2, .cs1 .twide .rt .r3, .cs1 .twide .rt .r4 {background-color:#556666; border-color:#556666;}
/* and/or set "bwide" for wide border at bottom of border-color */
.bwide .rinner {border-bottom-style:solid; border-bottom-width:1px;}
.cs1 .bwide .rinner {border-bottom-color:#556666;}
.cs1 .bwide .rb .r1, .cs1 .bwide .rb .r2, .cs1 .bwide .rb .r3, .cs1 .bwide .rb .r4 {background-color:#556666; border-color:#556666;}
/* Sample HTML to make a rounded-corner div
<div class="rounded all twide bwide filled border" id="foo">
<span class="rt"><span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span></span>
<div class="rinner" id="bar">
<!-- CONTENT INSIDE THE ROUNDED-CORNER DIV GOES HERE WITHIN CLASS "RINNER" -->
</div> <!-- .rinner #bar -->
<span class="rb"><span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span></span>
</div> <!-- .rounded #foo -->
*/
[edited by: encyclo at 1:38 am (utc) on Nov. 8, 2007]
[edit reason] no URLs thanks [/edit]
With images, I believe you will need to use JavaScript....
Just for the record, I meant "Without images..." in my post above (oops!) I suppose 'need' is a bit strong, as j_h_maccann has demonstrated above (it is the CSS forum afterall) - very tidy CSS! But personally I still prefer to use a bit of JavaScript (in combination with CSS) for the simple reason it keeps the original HTML markup very simple:
<div class="rounded">
Content content content....
</div>
It's just a nice presentational thing - if JS isn't available you just get square corners, which is fine (IMO).
