Comments on: CSS Rounded Corners Tutorial

By: Dave Woods

Dave Woods — Wed, 21 Jul 2010 10:52:47 +0000

@Sumant – There’s lots of tutorials on the web for beginners so my articles are aimed more at web professionals who are looking for solutions to common problems. However, if you give the following site a try then it will guide you through all the areas of HTML/CSS: http://www.htmldog.com/
Hope that helps?

By: sumant

sumant — Wed, 21 Jul 2010 10:45:19 +0000

I am not familier with web technology. I am new for all this things. I could not understand how and where to set rulles and how to use css. I suggest, you should concider new commers also, and should give compleate page code. I may be wrong, but to learner like me, those don’t know nothing will confuse and would not able to use such a useful things.

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.