Round Corner | Curved Corner DIV Cross Browser

These days I am trying to edit the site design to have a better look and provide easy access for users by a simple and good navigation menu. But there is a no of trade-offs like pagelook Vs lightweight, javasript Vs SEO etc.

We always like round corner in things whether it is furniture or car. But for web pages round corner is not so easy. There are a number of methods to include round corner in pages paragraphs images. But the easiest ways are not supported by all browsers.



In CSS3 there are some new special attributes included for the easy design of smooth corner boarder lines. But these code tags are different for different browsers . Actuallly it does not depend not on the browser but the layout engine which works behind it. Here is a list of layout engines.

Trident         Internet Explorer

Gecko            Firefox, Netscape

Web-kit        Google Chrome and Safari

Presto            Opera

These layout engines define their own notations, so there is a problem in creating cross browser designs.

#example1 {
border-radius: 15px;

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;



The Syntax:

border-*-*-radius: <length> | <%> ] [ <length> | <%> ]?


border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;


The Syntax:

<length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?


border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;


The following diagram gives a few examples of how corners might appear given differing radii:

If either value is zero, the corner will be square, not round.

For older versions of Mozilla

W3C Specification

Mozilla Implementation











But the Internet Explorer supports these properties only after IE9.

Cross Browser Examples

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:


#Example_A {
height: 65px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

#Example_B {
height: 65px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

#Example_C {
height: 65px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

#Example_E {
height: 65px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;



Webbased code generator

Spoofy Corner

No images, Supports Mozilla and IE version before 9 also



Image based Corners

Another Image Generator

Generates a PNG format rounded corners for you on the fly. Simply copy the scripts below into a browser and hit enter. c=999999&bc=white&w=4&h=4&a=tr

Tweak the following parameters to get the rounded corners of your choice.



the color, as either a name or a CSS-style color spec (RGB or RRGGBB) sans #. Color names that seem to work: black white gray red green blue yellow teal olive purple. Can you find more?


the background color, same acceptable input as c


height in pixels


width in pixels


which corner to generate; tl is top left, tr is top right, bl is bottom left, br is bottom





A java library for round corner

Another code

Jquery based round corner



Published by


Hello, I am Asim admin of this blog. An expert in Scientific Instrumentation (Analytical Instrumentation). My works are always associated with both Physics and electronics. Currently working on ARM based embedded systems for Optical(UV and Visible) and electrochemical spectroscopy (EIS). My M.Tech. Thesis was related to all these things. I had worked for a 8 bit microcontroller based standalone EIS (electrical impedance spectroscopy) device. I have Masters in Instrumentation engineering from NIT Kurukshetra,Haryana and Masters in Electronics Science from Sambalpur University, Odisha (Formerly Orissa/Utkal) Am also work for PHP MySQL AJAX based CMS design. i love blogging and coding(am not an expert).

Leave a Reply