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.