🎓 A1Learner
🔍
0 of 54 lessons completed

CSS Border Radius

The border shorthand sets a border's width, style and colour in one declaration. The border-radius property rounds the corners of an element.

The border shorthand

One declaration carries all three parts. The values name the width, the style and the colour.

.box {
  border: 3px solid blue;
}

Round the corners

The radius value sets how round each corner becomes. A larger value makes a rounder corner.

.box {
  border: 2px solid red;
  border-radius: 12px;
}

Make an ellipse

The picture is wider than it is tall. A radius of 50% rounds it into an ellipse.

img.pic {
  border-radius: 50%;
}

Example

.box {
  border: 3px solid blue;
  border-radius: 16px;
}
button {
  border: 2px solid green;
  border-radius: 8px;
}
img.pic {
  border-radius: 50%;
}

Key points

  • border: the shorthand property that sets width, style and colour in one line
  • border-radius: the property that rounds the corners of an element
  • A radius also rounds the background at the corners.
  • Four radius values set the four corners in order, starting at the top left.
  • A radius value in percent is a share of the box size.

In this example, the shorthand gives the box a blue border in one line. Its radius rounds the box corners by 16 pixels. The button gets a thinner green border and a smaller radius. The picture takes a radius of 50% and becomes an ellipse.

Note

border-radius also works on an element with no border. The background still rounds.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does the border-radius property change?