Comments on: CSS Rounded Corners Tutorial

By: Novice needs help on web design.. -

Novice needs help on web design.. - — Sun, 03 May 2009 17:08:48 +0000

[...] the two other boxes that go right across the top of the page as in the example here on this webpage Dave Woods – Freelance Web Designer UK CSS Rounded Corners Tutorial I would also like to have the page set up so that all my main content lies within a ‘container’ of [...]

By: ЛастоС

ЛастоС — Fri, 05 Sep 2008 00:34:02 +0000

Интересно и полезно, а будет еще что-то из этой же серии?

By: Doug

Doug — Mon, 14 Jul 2008 21:30:49 +0000

Sorry, a little clarification. The extra div I added was not a wrapper for the content, it was inserted like your divs above immediately followed by the closing tag:

And I did not have to add this a second time after the footer.

By: Doug

Doug — Mon, 14 Jul 2008 21:28:15 +0000

Dave-

I worked on numerous rounded corner “solutions” for about 5 hours last night – each with a problem in the latest versions of at least one of the browsers I test: IE vers 7.0.5730.11, Firefox vers 1.5.0.12, Opera vers 9.5.1, and Flock vers 1.2.3.

Finally I stumbled upon your solution, which works beautifully in all 4 browsers – thank you! There was one issue that I had with Foxfire and Opera – if I clicked outside the page, it selected all. Very strange. Through a little trial-and-error I discoverd this fixed the problem:

I added another div just after the top right div which I called “centerfill” with this css:

.centerfill {
width: 10px;
height: 10px;
font-size: 0;
}

I did not have to add it after the page content (before bottom left). Hopefully this won’t break the layout in future browser and CSS versions.

p.s. for your readers, I used this handy site, http://www.neuroticweb.com/recursos/css-rounded-box/, to create my corner images.

By: Dave Woods - HTML, CSS, Web Design » CSS Rounded Corners Revisited

Dave Woods - HTML, CSS, Web Design » CSS Rounded Corners Revisited — Mon, 21 Jan 2008 12:37:05 +0000

[...] initially covered this topic back in October which used four separate images for each corner of the rounded box, but whilst it’s a [...]

By: Jonathan

Jonathan — Sat, 12 Jan 2008 18:01:35 +0000

This really is a great tutorial. I have a client who I am designing a site for a needed to know how to use this rounded corners effect. Thanks so much!

By: Dave

Dave — Thu, 13 Dec 2007 11:50:47 +0000

CSS3 will certainly be able to achieve rounded corners and can be used for some of the modern browsers so you may use it for progressive enhancement to give those with the latest browsers a better experience whilst ensuring the site is still usable for those without any CSS3 support for rounded corners.

There are other solutions, including spiffy corners which requires no images at all but does use a lot of extra code which I personally don’t like and find the above solution to be the easiest to use at present time which supports all browsers.

By: nitinpai

nitinpai — Thu, 13 Dec 2007 09:51:28 +0000

Nice tutorial Dave.

Well I have thought this same solution but I am trying for some other solution which wouldnt require me to include those unwanted divs.

Maybe CSS3 will do the trick in future.

By: Vinnie Apicella

Vinnie Apicella — Wed, 28 Nov 2007 04:25:53 +0000

Thanks for the explanation. It definitely helps, but a bit complicated for someone like me with a minimal understanding of floats and layout and so forth. Would be welcome if you were able to cover it in more detail in the future. Very interesting stuff overall.

Cheers, Vinnie.

By: Dave

Dave — Mon, 26 Nov 2007 08:43:22 +0000

Overflow hidden on the container clear’s the floats in all modern browsers including IE7 however this method doesn’t work for IE6 and below alone so we need to give it “layout” (Do a google for “haslayout” for an explanation although I may cover this soon here).

If we apply a fixed height to modern browsers then they will remain at that height whereas IE6 treats height as min-height so using the star selector only targets IE6 and below so it’s a safe way to clear the floats for these browsers.

Your assumptions of Dreamweaver design view are correct. Also, always check your work in the most modern compliant browsers first (Opera, Firefox, Safari) and work backwards.

Hope that helps.