CSS: Round Corners: border-radius

By Xah Lee. Date: . Last updated: .

This page shows a example of using CSS3 to make round corners. You can do that with the border-radius attribute.

Here's a div element with round coners:

Round corners

Here's the CSS code:

div {
width:100px; height:100px;
border:solid thin black;
border-radius:10px;
}

Examples

Each of the following have width:100px; height:100px.

border-radius:
0px
border-radius:
10px
border-radius:
20px
border-radius:
30px
border-radius:
40px
border-radius:
50px
border-radius:
60px
border-radius:
70px
border-radius:
80px
border-radius:
90px

If border-radius is more than half of the width or height (whichever is smaller), the whole thing becomes a circle.

Rectangle Example

border-radius: 50px

Border Radius for Different Corners

Border radius can be specified for some corners only. The order is:

border-radius:top_left top_right bottom_right bottom_left

<div style="border-radius:50px 0 0 0"></div>

<div style="border-radius:0 50px 0 0"></div>

<div style="border-radius:0 0 50px 0"></div>

<div style="border-radius:0 0 0 50px"></div>

Omitting 「border-radius」 Values

Any of the 4 values of border-radius values can be omitted.

border-radius:x is same as border-radius:x x x x

<div style="border-radius:30px"></div>

border-radius:x y is same as border-radius:x y x y

<div style="border-radius:50px 20px"></div>

border-radius:x y z, it's the same as border-radius:x y z y

<div style="border-radius:50px 20px 10px"></div>

Specifying Different Radiuses for a Corner

For each border radius value, it can be a fraction, like this: border-radius:50px/10px 0 0 0. The 50px specifies the horizontal radius of a Ellipse, the 10px is the vertical radius.

css border-radius ellipse illustration
border-radius:55pt/25pt (image source)

Examples:

<div style="border-radius:50px/10px 0 0 0"></div>

<div style="border-radius:50px/10px"></div>

Border Radius Fullname Properties

border-radius is a shorthand for the following properties:

Browser Support

IE9 (released in ), supports border-radius. All other major browsers support it much earlier.

Reference

http://www.w3.org/TR/css3-background/

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.