Helpful Facts About Rounded Corners In CSS3

This article relays relevant information on rounded corners in CSS3, how they work, which browsers support it, and creating other rounded corner properties.

CSS3 allows you to generate rounded borders for your webpage. In addition, you can add style preferences such as shadows to boxes, and utilize a picture as a border with no need for making use of design programs such as Photoshop.

How It Works

With the four basic border radius properties, you can generate rounded corners in CSS3. Samples include border-top-right-radius, border-bottom-right-radius, etc. or it can be done concurrently at the same time through the utilization of shorthand property. This property can allow any singular or two values, unitized as percentage or length relative of box dimensions.

Values can also determine the curvature of the corners, on whether these are to assume an elliptical or rounded shape. If one value is present, it means that the vertical and horizontal radii are equally measured. If either of the values is zero, you will have a square corner.

Browser Support

WebKit browsers such as Google Chrome and Apple’s Safari support box-shadow and border-radius. However, for border-image, it necessitates the prefix -webkit-. Firefox is compatible with all border properties. Internet Explorer 9 and Opera are compatible with box-shadow and border-radius, but the latter web browser necessitates the prefix -o- intended for border-image.

Creating Rounded Corners in CSS3

In CSS2, it’s a little bit difficult to add rounded corners. The creation of rounded corners in CSS3 saw greater improvement in terms of ease. The following shows an example of adding up rounded corners to a div element:

div

{

border:5px solid;

border-radius:50px;

-moz-border-radius:100px; /* Old Firefox */

}

 

The prefixed -moz-border-radius is intended for Firefox, while for Google Chrome and Apple’s Safari, it is -webkit-border-radius. Lastly, the simple, old border-radius is for proofing if browsers have good compatibility with this CSS3 feature.

In this example, it is shown how to add rounded corners of the element desired. However, variations do exist. If you want to round some vertices while letting other vertices, appear elliptical, there is a corresponding CSS trick to be applied.

CSS3 Box Shadow

The following shows an example of adding up a box-shadow feature to a div element.

div

{

box-shadow: 20px 20px 10px #33333;

}

 

CSS3 Border Image

CSS3, with its border-image property also allows you to utilize a certain image as a border. The following example shows how it is done.

div

{

border-image:url(border1.png) 50 50 round;

-o-border-image:url(border.png) 50 50 round; /* Opera */

-webkit-border-image:url(border.png) 50 50 round; /* Safari and Chrome */

-moz-border-image:url(border1.png) 50 50 round; /* Old Firefox */

}