Border radius in CSS - Browser Rendering Trace

Render Flow - Border radius

Parse CSS selector

↓

Match element with border-radius

↓

Calculate radius values

↓

Apply clipping to corners

↓

Repaint element with rounded corners

↓

Composite layers

The browser reads the CSS, finds elements with border-radius, calculates the curve for each corner, clips the corners accordingly, repaints the element with smooth rounded edges, and then composites the final image.

Render Steps - 3 Steps

Code Added:width: 12rem; height: 6rem; background-color: #4a90e2;

Before

[ ]
(empty box, no size or color)

→

After

[____________]
[            ]
[            ]
[____________]
(blue rectangle, sharp corners)

The box now has size and a blue background, so it appears as a solid rectangle with sharp corners.

🔧 Browser Action:Creates box layer with specified size and background color

Code Sample

A blue rectangular box with white centered text and smooth rounded corners.

CSS

<div class="box">Rounded Box</div>

CSS

.box {
  width: 12rem;
  height: 6rem;
  background-color: #4a90e2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.5rem;
}

Render Quiz - 3 Questions

After applying step 3, what visual change do you see on the box?

A The text moves to the top-left corner

B The corners become smoothly rounded

C The box changes color

D The box size increases

Common Confusions - 3 Topics

Why do my corners not look rounded even after adding border-radius?

If the element has no visible background or border, the rounding won't be visible. Also, if the radius is very small compared to the element size, it might look like sharp corners.

💡 Make sure the element has background or border color and use a noticeable radius value.

Why does border-radius not work on images?

Images are replaced elements and sometimes overflow their container. You need to set overflow: hidden on the container or apply border-radius directly to the image with display: block.

💡 Use overflow: hidden on parent or set display: block on image with border-radius.

Why does border-radius create an ellipse instead of a circle?

If width and height are not equal, a 50% border-radius creates an ellipse. To get a perfect circle, width and height must be the same.

💡 Equal width and height + border-radius: 50% = circle.

Property Reference

Property	Value Applied	Corners Affected	Visual Effect	Common Use
border-radius	1.5rem	All four corners	Smooth rounded corners on all edges	General rounding of boxes
border-top-left-radius	2rem	Top-left corner only	Rounds only the top-left corner	Custom corner rounding
border-bottom-right-radius	0.5rem	Bottom-right corner only	Slight rounding on bottom-right corner	Subtle corner style
border-radius	50%	All corners	Creates a circle or ellipse if width=height	Making circles or pills

Concept Snapshot

border-radius rounds the corners of boxes. Use values like px, rem, or %. border-radius: 1.5rem rounds all corners equally. border-top-left-radius rounds one corner. 50% radius makes circles if width=height. Works best with visible backgrounds or borders.