Rounded corners using images

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Rounded corners using images

Post by alex.barylski »

So I have designed a nice looking box - just a simple rounded rectangle with a drop shadow actually :P

I've looked at the articles on alistapart.com, etc...Read a few articles and have an idea as to how most are done...maybe it's just me being a CSS newbie (although I've been using it for years) but...they all seem awkward???

So I ask, without pointing me to articles...

Show me the CSS and HTML (preferably seperate quote tags) which you can think of for rendering a resizable, 4 corner, 3 sided rounded box. 3 sided because the top doesn't have any drop shadow effect...

How do you accomplish this task...as everyone seem to have their hackish technique. Basically the CSS version of:

Code: Select all

<table>
  <tr>
    <td><img src="top_left_corner.png" /></td>
    <td><!-- No border for top --></td>
    <td><img src="top_right_corner.png" /></td>
  </tr>
  <tr>
    <td><img src="left_border.png" /></td>
    <td width="100%"><!-- content area --></td>
    <td><img src="right_border.png" /></td>
  </tr>
  <tr>
    <td><img src="bottom_left_corner.png" /></td>
    <td><img src="bottom_right_shawdow.png" /></td>
    <td><img src="bottom_right_corner.png" /></td>
  </tr>
</table>
So the contest is on...who can show me the coolest code...for accomplishing the above using CSS only!!!

Cheers :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

No body? :?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Hockey wrote:No body? :?
Easy although you need lots of nesting for completely fluid ones. If it was fixed dimension in either direction it would be easier.

The below code isn't complete, I was just showing the jist of it.

Code: Select all

<style type="text/css">
div.rounded_box {
    /* Make style for borders */
}

div.rounded_box div {
    background-image: url(top_left_corner.png);
    background-repeat: no-repeat;
    background-position: top left;
}

div.rounded_box div div {
    background-image: url(top_right_corner.png);
    background-repeat: no-repeat;
    background-position: top right;
}

div.rounded_box div div div {
    background-image: url(bottom_right_corner.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

div.rounded_box div div div div {
    background-image: url(bottom_left_corner.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}

div.rounded_box div div div div div {
    background-image: none;
}
</style>

.....

<div class="rounded_box">
    <div>
        <div>
            <div>
                <div class="content">
                    Enough nesting yet?
                </div>
            </div>
        </div>
    </div>
</div>

User avatar
shoebappa
Forum Contributor
Posts: 158
Joined: Mon Jul 11, 2005 9:14 pm
Location: Norfolk, VA

Post by shoebappa »

The method I use is nesting divs and using background images. For rounded corners you really just need to put an image in each corner. For drop shadows you also need the bottom, and right to grow (sometimes top and left as well). In order to do that you just use repeat-x and repeat-y.

Anyhoo, code isn't pretty but it works.

Code: Select all

<html>
<head>
<style type="text/css">
<!--
.spacer {
	padding-right: 5px;
	padding-bottom: 5px;
}

.container {
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #CCCCCC;
}

.b {
	background-image: url(images/b.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

.r {
	background-image: url(images/r.gif);
	background-repeat: repeat-y;
	background-position: right;
}

.bl {
	background-image: url(images/bl.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
}

.br {
	background-image: url(images/br.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
}

.tr {
	background-image: url(images/tr.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

-->
</style>
</head>
<body>
	<div class="b"><div class="r"><div class="bl"><div class="br"><div class="tr"><div class="spacer"><div class="container"> 
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum 
			tellus. Donec ac pede nec elit adipiscing sagittis. Praesent velit. 
			Suspendisse potenti. Donec sagittis pulvinar libero. Vivamus nec 
			quam. Aliquam mattis bibendum lorem. Nam dictum. Nullam nisl odio, 
			sodales ut, sollicitudin nec, hendrerit a, enim. Fusce viverra 
			egestas elit. Praesent id est id odio scelerisque dapibus. Donec 
			consequat aliquet quam. Lorem ipsum dolor sit amet, consectetuer 
			adipiscing elit. Sed porttitor magna sit amet erat. Morbi id elit. 
			Proin nec eros. Vestibulum ante ipsum primis in faucibus orci 
			luctus et ultrices posuere cubilia Curae;</p>
	</div></div></div></div></div></div></div>
</body>
</html>
Link: http://www.odu.edu/test/matt/css_shadow
User avatar
shoebappa
Forum Contributor
Posts: 158
Joined: Mon Jul 11, 2005 9:14 pm
Location: Norfolk, VA

Post by shoebappa »

heh, d11 beat me to it, but oh well. To explain a little more, the nested divs are essentially all the same size and just layered on top of each other. Like layers in photoshop that you just stack on top of each other and in each layer you're putting part of the shadow on top of the layer below. You have to start with the rows that repeat because they will be on the bottom, and run all the way accross. Then you put the bl, br, and tl images on top of the repeated backgrounds.

In my example I have a spacer div that just pads the content div by the width and height of the drop shadow.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Bam!!! Thanks alot guys...thats what I'm talking about :P

Much more logical and flexible then those listed on a alistapart.com

Very cool examples...very fluid...nice nice nice...

Thanks a ton!
Post Reply