Module 2 · The Box Model · Lesson 3 of 4

CSS Borders & Radius

Beginner ⏱ 15 min2 sections · 1 exercise · 4-question quiz

Borders draw the edge; border-radius reshapes it. From hairline dividers to perfect circles and pills, this one property pair carries a surprising share of modern UI.

1. Border basics

CSS — width, style, color

hr-card {
  border: 2px solid #5A8AB9;      /* shorthand           */
  border-bottom: 4px dashed #E0982D; /* per-side override */
}

The style keyword is mandatory — without solid, dashed, dotted or friends, no border renders. Each side can differ, which is how underline-style tabs (border-bottom only) are made.

2. border-radius: from soft to circle

CSS — the radius spectrum

border-radius: 12px;              /* soft card       */
border-radius: 999px;             /* pill button     */
border-radius: 50%;               /* perfect circle (on a square) */
border-radius: 40px 8px 40px 8px; /* per-corner: leaf shape */

Per-corner values run clockwise from top-left. A radius of at least half the height turns any box into a pill; 50% on a square makes a circle — the standard avatar treatment. Shadows and backgrounds follow the curve automatically.

💡 Dial in all four corners visually with the Border Radius generator — it writes the shorthand for you.

3. Try it yourself

Turn the square into a circle (border-radius: 50%) and give the button a pill shape with a 2px solid #3E6787 border.

exercise.html — editable

4. Quiz — check your understanding

CSS Borders & Radius Quiz

4 questions · pass at 60%

Q1. Which border declaration actually renders?

border: 2px #333;border: solid;border: 2px solid #333;Both B and C

A style keyword is required; B uses the default medium width and current color, C is fully explicit — both draw.

Q2. How do you make a perfect circle from a square div?

border-radius: 100pxborder-radius: 50%shape: circleborder: circle

50% of each dimension rounds a square into a circle.

Q3. border-radius: 40px 8px 40px 8px assigns corners in which order?

TL, TR, BR, BLTR, BR, BL, TLTL, BL, TR, BRRandom

Clockwise from top-left: top-left, top-right, bottom-right, bottom-left.

Q4. Underline-style tabs are usually built with…

text-decorationborder-bottom onlyoutlineA background image

A single-side border-bottom draws the underline without boxing the whole tab.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

CSS Borders & Radius

1. Border basics

2. border-radius: from soft to circle

3. Try it yourself

4. Quiz — check your understanding

CSS Borders & Radius Quiz

Practice with these generators