CSS: Round Corners, border-radius

By Xah Lee. Date: . Last updated: .

Use border-radius attribute to create round corners.

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 with Elliptical Corner

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/

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Like what you read? Buy JavaScript in Depth