Round corners with CSS3. Super Cool.

I was not very fond of CSS, until recently.  I just used html elements to style my pages. But then once I happened to use some simple CSS elements, coz I had basic CSS in my college syllabus. Ever since I’m a great fan and admirer of this simple, kewl technique.. CSS.

CSS Round Corner Menu

I have been fascinated by round cornered elements in web pages. I tried to learn the ‘secret art of round corners!!’. Most of my searches returned tutorials for rounding corners using images, Including this one. It uses 4 corner images and is pretty simple to implement.

A few days ago, I was browsing through some script from DynamicDrive CSS Library, I found an unfamiliar css element: -moz-border-radius. I did a lil research and eventually I got to CSS3. Checkout CSS3 is still in draft and all browsers have not started to support it. Yet some like Firefox, Safari etc has already started to adopt CSS3.

border-radius (reference) is an element which is included in the forthcoming CSS3. It can be used in the following forms.

If you use border-radius: 4em; , then all the four corners will be rounded by 4em. Or you can use border-radius: 5px 5px 0px 10px;, so you can use individual radii for all the four corners. Or the single attribute can be broken down as follows.

border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;

The Gecko Layout Engine which is the basis of Mozilla Firefox uses some equivalent attributes instead of border-radius. The border-radius equivalent in Gecko is -moz-border-radius (reference). It can also take 4 arguments as in -moz-border-radius:15px 0px 15px 0px;. If only 1 attribute is specified as in -moz-border-radius:15px;, the same will be applied for all 4 corners. -moz-border-radius can also be written as 4 different elements as follows.


Here is a few examples I made which uses the -moz-border-radius element for rounding corners. See the code of the page and see how simple it is. But remember -moz-border-radius works only in Gecko based browsers, which includes Firefox, NetScape, Camino, SeaMonkey K-Meleon etc (Google’s picture-organization software Picasa is based on Gecko).

That was Kewl, ain’t it? cya, babye.

If you like this post, please share it with your friends

    • Raj

      Yea CSS borders is very useful for us, but there are issues like these are non W3C valid options. Some are even browser specific. And in practice most of our clients want W3C valid css and html.
      So i usually suggest using javascript based curvycorners. I am sure you have seen jQuery curvycorners.
      🙂 thought i will remind it for other viewers.

    • Thanks Raj, for your suggestion. But CSS 3 is in draft (by W3C) and we all hope it will be soon compatible with all popular browsers. jQuery is cool. But I have head people saying that you should not use javascript for layout purposes, since all browsers are not javascript capable, and even some people disables javascript.

    • Pingback: Tweets that mention Round corners with CSS3. Super Cool. | Devil is Blogging --