homepage Welcome to WebmasterWorld Guest from 54.197.189.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
rounded corners (borders) with css
without images
htdawg




msg:3497638
 11:56 am on Nov 6, 2007 (gmt 0)

hi,
does anyone have an example of a table or div with rounded corners without images?

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

 

penders




msg:3497784
 3:43 pm on Nov 6, 2007 (gmt 0)

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'?

rocknbil




msg:3499175
 11:02 pm on Nov 7, 2007 (gmt 0)

(Robin_reala will probably help on this one)

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.

j_h_maccann




msg:3499209
 12:23 am on Nov 8, 2007 (gmt 0)

/* class "rounded" is the outer div to contain styling, class "rinner" is the inner div to contain content */
/* all the properties below are set on the SAME div as .rounded, as multiple classes */

.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]

penders




msg:3499438
 8:42 am on Nov 8, 2007 (gmt 0)

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).

htdawg




msg:3499506
 11:11 am on Nov 8, 2007 (gmt 0)

You guys are great!
Thank you all for your help & the examples!
:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved