CSS 3 borders | border-radius

In this article, we are going to talk about CSS 3 border properties. There are 3 main CSS elements when it comes to borders, as mentioned below:

border-radius
box-shadow
border-image

Browser support for CSS3 border properties

Source: W3Schools

In due course of developing Internet Explorer (IE), its latest version supports the border-radius and box-shadow elements, but not border-image – along with the absence of many other useful features of CSS 3. On the other hand, other browsers support all 3 features, with border-radius and box-shadow being so sans any browser based modifications.

While IE doesn’t support border-image at all, browsers such as Chrome, Safari, Firefox and Opera require web-kit prefix, moz-prefix and -0- in order to support the border-image property respectively.

Ex : web-kit-border-image (Chrome and Safari), moz-border-image (Firefox) and -0-border-image (Opera).

CSS border-radius

CSS border-radius is used to create rounded corner HTML elements without using images. This was a huge improvement over CSS 2, where designers had to use 4 cornered images along with a few code tricks to achieve this.

syntax

border-radius: top-left top-right bottom-right bottom-left
Javscript : object.style.borderRadius='10px';

border-radius: 1-4 length|% / 1-4 length|%; (this means you can use between 1 to 4 in values in px or em, or you can use % as a value).

You can simply remember this as moving clockwise; starting from top-left with the highest precedence. In any given statement there can be 1 to 4 values for border-radius property.

The code below will create a HTML DIV element with CSS 2 styling.

HTML

Hello! Everyone

CSS 2

#border-radius-box{

    width:400px;
    padding:10px;
    background:#CCC;
    text-align:center;
    border:#000 2px solid;
}

result

Hello! Everyone

Note : this article series is written with an assumption that you have a good understanding of HTML and CSS. If you are new to HTML and CSS, feel free to check out HTML and CSS articles first.

While the above coding is a simple HTML and CSS based DIV element presentation, let’s try to style it up using CSS 3 border-radius.

CSS 3

#border-radius-box{

    width:400px;
    padding:10px;
    background:#CCC;
    text-align:center;
    border:#000 2px solid;

    /* CSS 3 elements */
    border-radius:5em; /* IE,Safari,Opera,Chrome */
    -moz-border-radius:5em; /* Mozilla */
}

result

Hello! Everyone

Herewith there is only a single value for border-radius, unlike 4 separate values as shown in the previous syntax. This is called inheritance. What this means is that if a sub-value for a given property is empty, the immediate neighboring value will take its place or the super element value.

Ex : In the case of border-radius, the first sub-value will be from the top-left followed by the 3 remaining values moving clockwise towards bottom-left.

The top-left value should always be presented. If there is a single value, then it refers to the top-left sub-value. Next, the other 3 values will be generated based on reference to the top-left value, if absent on sub value. For better insight, let’s look into this reference starting from bottom-left and moving anti-clockwise.

• If bottom-left value is not present, it will look for top-right value as reference.
• If bottom-right value is not present, it will look for top-left(default) value as reference.
• If top-right value is not present, it will look for top-left(default) value as reference.

Confusing? lets look at some examples

In the above coding you can see there is only 1 value for both border-radius and -moz-border-radius properties. So let’s consider the bottom-left value. As it's empty we can look for its reference, the top-right - which is also empty. For top-right reference i.e. top-left, we derive 5em as a value, which will resultantly inherit both top-right and return inherit to bottom-left.

top-left -> top-right -> bottom-left == 5em

What about the bottom-right? Since it's empty, it will look into top-left as a reference, which will be 5em.

top-left -> bottom-right == 5em

So when you have only 1 value present on sub-value list, that will be the default value (which is top-left) and other 3 properties will therefore inherit the same value by reference.

border-radius:5em;

Is the same as:

border-radius:5em 5em 5em 5em;

Or

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

-moz-border-radius:5em;

Is the same as:

-moz-border-radius: 5em 5em 5em 5em;

Or

-moz-border-top-left-radius:5em;
-moz-border-top-right-radius:5em;
-moz-border-bottom-right-radius:5em;
-moz-border-bottom-left-radius:5em;

Now let's take a look at another example:

CSS 3

#border-radius-box{

    width:400px;
    padding:10px;
    background:#CCC;
    text-align:center;
    border:#000 2px solid;

    /* CSS 3 elements */
    border-radius:2em 4em;
    -moz-border-radius:2em 4em;
}

result

Hello! Everyone

Above example values are presented for top-left and top-right only.

top-left -> bottom-right == 2em

top-right -> bottom-left == 4em

border-radius:2em 4em;

Is the same as:

border-radius:2em 4em 2em 4em;

Or

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

-moz-border-radius:2em 4em;

Is the same as:

-moz-border-radius: 2em 4em 2em 4em;

Or

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

Here’s one more example:

CSS 3

#border-radius-box{

    width:400px;
    padding:10px;
    background:#CCC;
    text-align:center;
    border:#000 2px solid;

    /* CSS 3 elements */
    border-radius:2em 4em 1em;
    -moz-border-radius:2em 4em 1em;
}

result

Hello! Everyone

Above example values are presented for top-left, top-right and bottom-right only.

top-left == 2em

top-left -> bottom-right == 4em

bottom-right -> 1em;

border-radius:2em 4em 1em;

Is the same as:

border-radius:2em 4em 1em 4em;

Or

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

-moz-border-radius:2em 4em 1em;

Is the same as:

-moz-border-radius: 2em 4em 1em 4em;

Or

-moz-border-top-left-radius:2em;
-moz-border-top-right-radius:4em;
-moz-border-bottom-right-radius:1em;
-moz-border-bottom-left-radius:4em;

For starters, these explanations should be sufficient for gaining basic understanding regarding CSS 3 border-radius. To proceed further, let’s look at some slightly advanced coding, such as the one below:

CSS 3

#border-radius-box{

    width:400px;
    padding:10px;
    background:#CCC;
    text-align:center;
    border:#000 2px solid;

    /* CSS 3 elements */
    border-radius:1em 2em 4em / 0.5em 3em;
    -moz-border-radius:1em 2em 4em / 0.5em 3em;
}

result

Hello! Everyone

This code includes some advanced options where a user can manipulate the X-axis and Y-axis of a given corner. In more detail:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

The above coding has been given values to both X-axis and Y-axis of each border-radius entry. This in turn can be used to manipulate the design as we like.

As a final conclusion, I would suggest that you experiment with these values and get a good understanding of how these different elements behave under different inputs - you may just come across some pretty innovative designs! Who knows?

Enjoy!!!!