Making "curved" edges in CSS layouts

[AnthroAndStargate]

I am making a layout for a blog/site I am starting up (this is my first time coding CSS).

I want to make curved edges, I have a header, nav bar under the header, content holder (for the blog stuff), side bar (for info, etc), then footer. How do sites make curved edges on all the different divs they have?

By curved edges I mean something like this website has: http://csszengarden.com/?cssfile=/197/197.css&page=2 like on the right side frames of the site but I'd want it to be around my "container" div if possible. Or basically i'm just wondering, how do they get those curves applied anywhere?

My CSS as it is now is:

 

[Woosta]

It depends. Is your layout going to be elastic? Expanding in width and height? If so and assuming you are not relying on ECMAScript, you will need to target 4 individual elements. If your site is fixed width as 95% are, and if this is on an element that has expanding height ( content area, main site wrapper ), you can get away with 2 images, one for the corners at the top and one for the corners at the bottom. You have to realize that by default, elements on the canvas have a transparent background, and you only see the white background styled by the user agent as white on the body or html element. Basically, Just make your rounded corner images and target an outer element, such as #container and set it to the top left.. eg #container { background:url(bottom.jpg) no-repeat bottom left; } and then create another element inside the container but outside of #header, so it contains header.. eg #container-inner { background:url(top.jpg) no-repeat; }. This should be good enough.

You can actually really get away with one image if you use overflow and height properly, just showing various parts of the image at once. There are also scripts that do this for you, but the cost is a few more bytes and more overhead because you're using a script. If you are doing simple, simple rounded corners and you are into the whole, 'progressive enhancement' and don't care about legacy browsers such as IE (7, 6, 5) then you can use proprietary properties on modern browsers such as Safari/Mozilla like this one. The -moz prefix is there only because the CSS3 is still a draft and isn't fully completed - and browser vendors won't make the property names live unless the draft is complete. here is a page with some examples.

That page uses a whole image as a background though, http://csszengarden.com/197/down1.gif
So if you want to do it on something with fixed width, like a block area then just make an element and either float it, position it (absolutely or fixed.. technically fixed will work but its not very common and both of these values would move the element 'out of flow' ), or set the display mode to block (i recommend a float so its friendlier with column layouts) just set a background, width/height and that should be good enough.

 

[AnthroAndStargate]

Originally posted by: Woosta
It depends. Is your layout going to be elastic? Expanding in width and height? If so and assuming you are not relying on ECMAScript, you will need to target 4 individual elements. If your site is fixed width as 95% are, and if this is on an element that has expanding height ( content area, main site wrapper ), you can get away with 2 images, one for the corners at the top and one for the corners at the bottom. You have to realize that by default, elements on the canvas have a transparent background, and you only see the white background styled by the user agent as white on the body or html element. Basically, Just make your rounded corner images and target an outer element, such as #container and set it to the top left.. eg #container { background:url(bottom.jpg) no-repeat bottom left; } and then create another element inside the container but outside of #header, so it contains header.. eg #container-inner { background:url(top.jpg) no-repeat; }. This should be good enough.

You can actually really get away with one image if you use overflow and height properly, just showing various parts of the image at once. There are also scripts that do this for you, but the cost is a few more bytes and more overhead because you're using a script. If you are doing simple, simple rounded corners and you are into the whole, 'progressive enhancement' and don't care about legacy browsers such as IE (7, 6, 5) then you can use proprietary properties on modern browsers such as Safari/Mozilla like this one. The -moz prefix is there only because the CSS3 is still a draft and isn't fully completed - and browser vendors won't make the property names live unless the draft is complete. here is a page with some examples.

That page uses a whole image as a background though, http://csszengarden.com/197/down1.gif
So if you want to do it on something with fixed width, like a block area then just make an element and either float it, position it (absolutely or fixed.. technically fixed will work but its not very common and both of these values would move the element 'out of flow' ), or set the display mode to block (i recommend a float so its friendlier with column layouts) just set a background, width/height and that should be good enough.

I think I get waht your saying. Thanks! DO you know if using one float (to move a side bar to the right of a content bar and then using a clear:both is acceptable CSS? Im new so I'm not sure if I did it the right way.

 

[Woosta]

http://76.74.181.101/apache2-default/rounded.html

Damn. Tried to get the whole thing without looking at the page.. had to refresh/update code twice

Reminder: if you are doing it on a floated element that's going to be a block in your column, and you're going to have a box coming afterwards vertically, set clear:both (or the actual value equal to whichever direction you floated it towards.. be it left or right).

 

[AnthroAndStargate]

Opps looks like you caught me before I edited my post. Thanks a lot for all the help again!

I think what you jsut said is what I have on my layout.

Edit: I always though the rounded element was a CSS thing, its actually just an image that you have to round? Do you know of a repository of "rounded corners" or do I need to make one?

 

[Woosta]

CSS3 (which is NOT even finalized, although browsers such as Safari, Opera, Firefox and Konqueror have begun implementing some of its properties. MSIE doesn't even fully support 90% of CSS2) has 'border-radius' which can give you a rounded corners effect, but it's only a simple effect. If you want to emulate those nice looking dropshadows, heavy gradients then you are going to have to use images. Most of the time, it's always an image. And only webkit (Safari) and gecko (Firefox) browsers (maybe some unix khtml rendering engine user agents as well) support border-radius, your best bet is to use images if you care about 60% of the world viewing your web page and seeing that effect (MSIE) users.

You can google up 'rounded corner css image' and there are probably generators nowadays, but I just made my own.

 

[JACKDRUID]

ajax also has a RoundedCornerExtender you may be intersted in...Text

 

[Woosta]

Originally posted by: JACKDRUID
ajax also has a RoundedCornerExtender you may be intersted in...Text

?

1. Ajax is a marketing acronym for an approach - "a way of thinking about the architecture of web applications using certain technologies." I suggest you familiarize yourself with the term before using it.

2. If you are referring to the XMLHttpRequest object - its methods/properties and its whole purpose has NOTHING TO DO with stylistic elements much less rounded corners.

3. What you are linking to is some proprietary plugin for ASP.net applications.

4.

<ajaxToolkit:RoundedCornersExtender ID="rce" runat="server"
TargetControlID="Panel1"
Radius="6"
Corners="All" />

Most people wouldn't know what the hell to do with this piece of code, as it is proprietary. This guy asked a basic question on html/css, not how to incorporate some bloated framework just for one little functionality which can be done with ease, and 99% less code than that ASP thing.