CSS and Round Corners: Build Boxes with Curves

[nassehma]

Excellent. It is always so good when tutors take the time to recognize that some of us are just starting out. We need others to hold our hands till we can balance our steps. Need more tutorials like this. Great job.

[tylerparker]

I must agree with the sentiment of the other posters. I've found a multitude of methods online for getting "rounded corners," but all of them seem to make assumptions of the viewer's pre-existing knowledge on the subject. This was very clear, and just as helpful. Thank you so much!

[ohad]

im so proud of u tutorial people. u make life just easier.

tnx
ohad
israel

[Pixels]

Just what I needed thanks. Making stuff with alot of images the old way just kills me.

[andrew]

This way of creating round corners looks pretty neat, but arent't there a bit too many div tags?

[Amjath]

This is very useful n superb but you are using so many div tags try to reduce div tags then only it's understandable....

[Monty]

Congratulations on your quest to reduce the amount of superflous code caused by tables, you have successfully robbed Peter to pay Paul.

[Ruby]

I have an improvement that make this solution even more elegant: Instead of making 4 colored corners and setting the background to match that color, I made 4 white inverse corners with the inside transparent so that I can change the color of the boxes dynamically in the CSS with no additional images. This only works with a white background, of course.

[mr.humble]

great!

thanks,Trenton Moss

[Stoffer]

Anybody who can see why I get open white spots og gaps when I write text?

css:

/* pushes the page to the full capacity of the viewing area */
 
html {height:100%;}
body {height:100%; margin:0; padding:0;}
 
/* prepares the background image to full capacity of the viewing area */
 
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
 
/* places the content ontop of the background image */
 
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
 
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
 
#bg {position:absolute; z-index:-1;}
 
#content {position:static;}
</style>
<![endif]-->
 
#ramme
 
#meny {	border-top: 1px solid gray;
		border-bottom: 1px solid gray;
		width: 100%;
		} 
 
#logo	{height: 400px;
		 width: 100%;
 
		}
 
		[]
 
/*Part 1round corners*/
#liquid-round { 
width:70%;
margin:0px auto; 
background: #ffffff url(leftside.gif) repeat-y left top;
} 
 
/*part 2 round corners*/
 
#top { 
width:100%; 
height:20px; 
background:url(top.gif) no-repeat left top; 
} 
.top span { 
display:block; 
position:relative; 
height:20px; 
background:url(top-right.gif) no-repeat right top; 
} 
 
/*part 3 round corners*/
 
#center-content { 
position:relative; 
background:url(rightside.gif) repeat-y right top; 
padding:1px 20px 1px 25px; 
margin:-1px 0 -50px 0; 
} 
 
/*part 4 round corners*/
#bottom { 
height:60px; 
background:url(bottom.gif) no-repeat left bottom; 
}
 
.bottom span { 
display:block; 
position:relative; 
height:60px; 
background:url(bottom-right.gif) no-repeat right bottom; 
}

html:

<div id="liquid-round">
    <div id="top"><span></span></div>
    <div id="center-content">
<!-- CONTENT BEGIN -->
    <p>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p>
    <p>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p>
<!-- CONTENT END -->
    </div>
    <div id="bottom"><span></span></div>
</div>

[HelpingStoffer]

@Stoffer: if you remove the <p> tags or set some css rule to remove the margins of those <p> tags, things should work out for you.

As for the rounded corners, great tutorial, but since I don't like using images for that, I'll just keep searching...

[Jeff]

Using Firefox 2.0.0.12 and IE 7, I couldn't get this work. I even downloaded your test file and the images and it does not work. Any ideas?

[David]

I've seen this tutorial here before, but finally tried it. Works great, thanks. I read the comment above, and it works fine in Firefox 2.0.0.13, and "gasp" IE 6!

[Bhupender]

this is an excellent article.. but what if someone want to add images on sides as well i.e. top, right, bottom and left side besides corners.
an improve in this article will be highly useful.

[Devin]

Doesn't work with IE7

[Craig]

I tried this in Firefox 3 and IE 6, & 7, but the background color always covers the images, and used the exact same code here and I'm stumped lol :o(

[Ruth]

Clear and easy to follow - thanks! Works perfectly in IE7 and Firefox 3.

[Sean]

Very easy to do. Works well in IE7 and FF3. Don't pay attention to the tards who commented above. Works great.

[Francesco]

But why using three divs just for rounded borders? I would accept this solution for my personal web site, of course. However I am working on a CMS portal layout using CSS and my boss complains about the use of "extra" divs. We got rounded borders applying the images to the corners of the maincontainer, its header, its title and its footer. The concept is the same, but no extra/specific divs. Note: this is NOT a critic to your code, but just a personal idea :-)

[Vaze]

I must have done something wrong but I can see only the bottom left icon after applying the css and html

[happyoink]

The thing is, many of these CSS curves don't look right to me. I can produce better smoother curves in Photoshop.

[fadel alaydio]

although using images is not favarable but it seems cleaner than the all-css corners which uses <b> as line divider with different margins from the div

[happyoink]

Images look better imo. Not like the nasty jaggy CSS corners that I've seen.

[Silver Fierfly is an idiot]

Actually, this isn't "CSS corners" like you're implying. This is CSS, displaying images, not pure CSS rounded corners. This a) looks smooth (did you click the example at all?) and b) is customizable in Photoshop. Note the use of ".gif" in the final CSS.

[Satheesh]

sUPER!!!... i've used it while modifing prologur theme for wordpress