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