Border radius in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS property border-radius do?

It rounds the corners of an element's border, making them curved instead of sharp.

beginner

How do you make all four corners of a box have the same rounded curve?

Use border-radius with one value, like border-radius: 10px;.

intermediate

How can you round only the top-left corner of a box?

Use border-top-left-radius property, for example: border-top-left-radius: 15px;.

beginner

What units can you use with border-radius?

You can use length units like px, em, rem, or percentages like 50%.

beginner

What visual effect does border-radius: 50%; create on a square element?

It creates a circle by rounding the corners fully.

Which CSS property rounds the corners of an element?

A border-radius

B border-style

C border-width

D border-color

border-radius is the property that controls how rounded the corners of an element are.

How do you round only the bottom-right corner of a box?

A border-radius-bottom

B border-bottom-right-radius

C border-radius-bottom-right

D border-bottom-radius

The correct property is border-bottom-right-radius to target that corner specifically.

What happens if you set border-radius: 50% on a square element?

A It becomes a square with sharp corners

B It becomes a rectangle

C It becomes a circle

D It disappears

Setting border-radius: 50% on a square rounds it fully into a circle shape.

Which unit is NOT valid for border-radius?

A px

B em

C rem

D deg

deg is used for angles, not for border-radius. Length units and percentages are valid.

How do you apply different rounding to each corner?

A Use four values in <code>border-radius</code>

B Use only one value in <code>border-radius</code>

C Use <code>border-style</code>

D Use <code>border-width</code>

You can specify four values in border-radius to set each corner's rounding separately.

Explain how to use the border-radius property to create a circle from a square element.

Think about how percentages affect corner rounding.

Describe how to round only the top-right and bottom-left corners of a box with CSS.

Use specific corner properties.

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