homepage Welcome to WebmasterWorld Guest from 54.211.73.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
rounded corners (borders) with css
without images
htdawg

10+ Year Member



 
Msg#: 3497636 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3497636 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3497636 posted 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

10+ Year Member



 
Msg#: 3497636 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3497636 posted 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

10+ Year Member



 
Msg#: 3497636 posted 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