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.

Practice

1. What does the CSS property border-radius do to an element?

easy

A. It makes the corners of the element rounded instead of sharp.

B. It changes the border color of the element.

C. It adds a shadow around the element.

D. It increases the border thickness.

Solution

1. Step 1: Understand the property purpose

   The border-radius property controls the roundness of the corners of an element.

2. Step 2: Compare options with property effect

   Only "It makes the corners of the element rounded instead of sharp." describes making corners rounded, which matches border-radius.

3. Final Answer:

   It makes the corners of the element rounded instead of sharp. -> Option A

4. Quick Check:

   border-radius = rounded corners [OK]

Hint: Remember: radius means roundness, so border-radius rounds corners [OK]

Common Mistakes:

• Confusing border-radius with border color or thickness
• Thinking it adds shadows
• Assuming it changes element size

2. Which of the following is the correct CSS syntax to make all corners of a box have a 10px rounded radius?

easy

A. border-radius: 10;

B. border-radius: 10px, 10px, 10px, 10px;

C. border-radius: 10px 10px 10px 10px 10px;

D. border-radius: 10px;

Solution

1. Step 1: Recall correct CSS syntax for border-radius

   The property accepts one to four length values without commas. For all corners equal, one value is enough.

2. Step 2: Check each option's syntax

   border-radius: 10px; uses one value with unit and no commas, which is correct. border-radius: 10; lacks units, C has too many values, D uses commas which are invalid.

3. Final Answer:

   border-radius: 10px; -> Option D

4. Quick Check:

   One value with unit, no commas = correct syntax [OK]

Hint: Use one value with unit and no commas for all corners [OK]

Common Mistakes:

• Omitting units like px
• Adding commas between values
• Using too many values

3. What will be the visual result of this CSS on a square div?

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

medium

A. A blue square with sharp corners

B. A blue circle

C. A blue rectangle with rounded corners

D. A blue square with a thick border

Solution

1. Step 1: Understand border-radius with percentage

   Setting border-radius: 50% on a square makes the corners fully rounded, forming a circle shape.

2. Step 2: Analyze the div shape and color

   The div is 100px by 100px, so a circle with 100px diameter and blue fill will appear.

3. Final Answer:

   A blue circle -> Option B

4. Quick Check:

   border-radius 50% on square = circle [OK]

Hint: 50% border-radius on square = circle shape [OK]

Common Mistakes:

• Thinking 50% means half-rounded corners only
• Confusing circle with rectangle
• Ignoring the shape dimensions

4. Identify the error in this CSS snippet that tries to round only the top-left corner:

div {
  border-radius-top-left: 15px;
}

medium

A. border-radius cannot round individual corners

B. Value 15px is missing units

C. Property name is incorrect; should be border-top-left-radius

D. The property needs !important to work

Solution

1. Step 1: Recall correct property for individual corner radius

   The correct property to round the top-left corner is border-top-left-radius.

2. Step 2: Check the given property name

   The snippet uses border-radius-top-left, which is invalid CSS syntax.

3. Final Answer:

   Property name is incorrect; should be border-top-left-radius -> Option C

4. Quick Check:

   Individual corner radius = border-top-left-radius [OK]

Hint: Remember: 'border-top-left-radius' for top-left corner [OK]

Common Mistakes:

• Swapping words in property name
• Forgetting units on values
• Thinking border-radius alone can target one corner

5. You want to create a button with the top-left and bottom-right corners rounded by 20px, and the other corners sharp. Which CSS code achieves this?

hard

A. border-radius: 20px 0 0 20px;

B. border-radius: 20px 0 20px 0;

C. border-radius: 20px 0 0 0 20px;

D. border-radius: 20px 0 20px 20px;

Solution

1. Step 1: Recall border-radius order for four values

   The order is top-left, top-right, bottom-right, bottom-left.

2. Step 2: Assign 20px to top-left and bottom-right, 0 to others

   So values should be: 20px (top-left), 0 (top-right), 20px (bottom-right), 0 (bottom-left).

3. Step 3: Match options with correct order

   border-radius: 20px 0 0 20px; matches this order correctly.

4. Final Answer:

   border-radius: 20px 0 0 20px; -> Option A

5. Quick Check:

   Order: top-left, top-right, bottom-right, bottom-left [OK]

Hint: Remember order: top-left, top-right, bottom-right, bottom-left [OK]

Common Mistakes:

• Mixing up the order of values
• Using five values instead of four
• Assigning wrong corners to values