border-radius — CSS Technical Interview Questions & Answers

Rounding the corners of an element's box.

border-radius

  • Rounding the corners of an element's box.
  • border-radius is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { border: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If border-radius is about space, draw the box.

Technical Interview Tip: border-radius: one rule on .card, then say what changed.

Code Examples for border-radius

border-radius — working example

.pill {
  border-radius: 999px;
}

.card {
  border-radius: 12px;
}

.avatar {
  border-radius: 50%; /* circle when width = height */
}

border-radius rounds corners; 50% makes a circle on a square box; large values make pills.

How to Explain border-radius to an Interviewer

What does border-radius do?

A CSS property that changes look/layout Write it in a rule and refresh