Border radius

Learn to round corners with border-radius.

What is border-radius?

border-radius rounds the corners of a box. The value is a radius; the larger it is, the softer the corner. border-radius: 8px gives a card a typical, gently rounded look.

For a square box the radius draws a quarter circle; for a rectangle it draws a quarter ellipse. Even without a border, the background corners still round; the rounding affects every layer of the box.

Each corner separately

With one value, border-radius applies the same radius to all four corners. With two values, the first goes to top-left and bottom-right, the second to top-right and bottom-left.

Four values cover top-left, top-right, bottom-right and bottom-left in order. There are also single-corner properties such as border-top-left-radius; they help when only one corner should be rounded.

Exercise Make a round avatar

Write a declaration block for the .avatar selector. Add the border-radius: 50% declaration. A percentage value turns a square image into a full circle.

Show example solution

/* round avatar */
.avatar {
  border-radius: 50%;
}

Test yourself

What does border-radius: 8px; do?
- Sets the border thickness to 8 pixels
- Changes the border color
- Adds 8 pixels of padding
- Rounds the corners with an 8 pixel radius
Show answer

Rounds the corners with an 8 pixel radius — Correct. 8px is the corner radius; the larger it is, the rounder the corner.

Write the corner radius property

.box {
  ____: 12px;
}

Show answer

.box {
  border-radius: 12px;
}

Match the radius value to its look

0

Sharp corner
8px

Slightly round
50%

Full circle

Next lesson: Box shadow

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies