Round Corners and Cascading Style Sheet 3 (CSS 3)

By Laurie

CSS 3! I didn’t even know there was a 1 & 2

Well the plot thickens. With traditional software we could expect a release of software but, of course, CSS isn’t software it’s more of a protocol. This is where things get tricky. The CSS 3 standard exisits today but now we must wait for the browsers to become CSS 3 compliant.
Most of us can guess which ones are lagging behind. It also appears that the functionality offered by CSS 3 is being rolled out rather than a browser being completly CSS 3 compliant.

The reason I started looking at CSS 3 in the first place was because I wanted to produce a tabbed menu but I wanted the tabs to be curved. So, I Googled something like CSS curved corners and so began my journey of discovery.

It appears that the most popular browsers are capable of rounding the corners but this is done as a workaround.

For example, the CSS line to acheive the rounded corners at each corner is border-radius:10px;

The following lines need to be added for other browsers:


or the additon of a file called

The above list is not by any means complete and there are still workarounds which involve using curved .gif images.

None of the solutions appears to be complete. For example some of the solutions and the .gif image, which is a fixed size, will not scale when the users changes the zoom. This means that anyone producing pages for large organisations will have trouble complying with the Disability Discrimination Act (DDA) for those people who need to see the pages in larger fonts or magnified.

To get solutions to work in some browsers where you use layering requires additon JavaScript to maintain the consistency of the page rendering.

If at this stage you are asking yourself what all the fuss is about then take a look at this site using Firefox, if you usually use IE, and IE if you usually use Firefox.

That simple act of taking the edge off of the corners, I believe, transfers the site from a very functional technical solution to something more slick and more of the sort of thing you would expect from the marketing solution.

So what now? For me, I am going to put the border-radius:10px lines and some of the other lines which are independant of additonal code to make them work into my new sites and test them in the browsers which currently support the command and/or work. I’ll wait for the other browsers to catch up and when they do the curves will appear.

Of course, using feedback from my Google Analytics account I can see that almost all of my visitors use IE or Firefox. So, thats where I will concentrate my efforts.

categoriaTechnical commentoNo Comments dataJanuary 5th, 2014


This author published 39 posts in this site.
Welcome to my blog. My interest are Judo, Self Employment, Internet and Off-Line Business.


FacebookTwitterEmailWindows LiveTechnoratiDeliciousDiggStumbleponMyspaceLikedin

You must be logged in to send a comment.