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
div {
width:100px;
height:100px;
border:solid thin black;
border-radius:10px;
}

Examples

100px × 100px square.


border-radius:
0px

border-radius:
10px

border-radius:
20px

border-radius:
30px

border-radius:
40px

border-radius:
50px

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

border-radius:
60px

Rectangle example:

border-radius: 50px

Specifying Different Radiuses for a Corner

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

border-radius:top_left top_right bottom_right bottom_left


border-radius:50px 0 0 0

border-radius:0 50px 0 0

border-radius:0 0 50px 0

border-radius:0 0 0 50px

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


border-radius:30px

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


border-radius:50px 20px

border-radius:x y z, is the same as border-radius:x y z y


border-radius:50px 20px 10px

Border Radius with Elliptical 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:


border-radius:50px/10px 0 0 0

border-radius:50px/10px

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

https://www.w3.org/TR/css-backgrounds-3/

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
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon