Border-radius and box-shadow

A CSS property that rounds the corners of an element's outer border edge.

Part of: HTML and CSS Journey — Module 57

What it does: The first two 0 values represent horizontal and vertical offsets, followed by the blur radius. The border-radius property alters the curvature of the box corners. A value of 50% rounds all corners relative to the dimensions, forming a circle from a square. The inset keyword places the shadow effect within the frame boundary. You can target specific corners via individual properties or multi-value shorthand values. Offsets are required parameters; you must specify 0 0 to indicate zero offset distances. A border-radius of 50% turns any square element into a perfect circle. CSS numerical values (except 0) require a unit specified to render correctly.

Common mistakes: Line 1 is incorrect because CSS properties use colons (:), not equal signs (=), to separate properties from values. Line 2 is incorrect because border-radius requires a unit like px or %. A unitless 50 is invalid.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Border-radius and box-shadow (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which property is used to create rounded corners in CSS?

border-radiusbox-radius

Matches

.box { border-radius: 10; }

↓

Missing a required length unit like px or % after the number.

Applying

Meanings

Term

border-radius

Meaning

A CSS property that rounds the corners of an element's outer border edge.

Practice

.card {

Testing

Gaps

: 5px;

Check Answer

Spots

1.box {

2 border-radius = 10px;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which property is used to create rounded corners in CSS?

A. border-radius ✓

B. box-radius

The border-radius property alters the curvature of the box corners.

2. To turn a perfect square element into a perfect circle, which value should you apply to border-radius?

A. 100px

B. 50% ✓

A value of 50% rounds all corners relative to the dimensions, forming a circle from a square.

3. Which keyword changes a box-shadow from an outer shadow to an inner shadow?

A. inset ✓

B. inside

The inset keyword places the shadow effect within the frame boundary.

4. In box-shadow: 4px 8px 5px black;, what does the 5px value represent?

A. The spread radius

B. The blur radius ✓

The order of sizes is horizontal offset, vertical offset, and then blur radius.

5. Is it possible to specify separate border-radius values for different corners of a single element?

A. Yes ✓

B. No

You can target specific corners via individual properties or multi-value shorthand values.

Match the Pairs

.box { border-radius: 50%; } → Rounds the element corners fully to create a circular or elliptical shape.

.box { box-shadow: inset 0 0 5px black; } → Applies a subtle black shadow inside the inner edges of the element.

Applies a shadow with a 10px blur radius and no offsets. → .box { box-shadow: 0 0 10px gray; }

Rounds only the top-left and bottom-right corners of the container. → .box { border-radius: 10px 0; }

.box { border-radius: 10; } → Missing a required length unit like px or % after the number.

.box { box-shadow: 5px 5px; } → Missing a color value for the shadow declaration.

Key Term

border-radius

A CSS property that rounds the corners of an element's outer border edge.

Fill in the Blanks

1. .btn { border-radius: 5px; }

Hint: Type the property that rounds element corners

2. .circle { border-radius: 50%; }

Hint: Type the percentage value to make a perfect circle

3. .box { box-shadow: 5px 5px black; }

Hint: Type the property used to add a drop shadow

4. .card { box-shadow: inset 0 0 5px red; }

Hint: Type the keyword that makes the shadow an inner shadow

5. .img { border-top-left-radius: 8px; }

Hint: Type the property that targets only the top left corner

Spot the Error

Question 1

A .box {

B border-radius = 10px;

C box-shadow: 2px 2px 2px #ccc;

D }

Line B — Line 1 is incorrect because CSS properties use colons (:), not equal signs (=), to separate properties from values.

Question 2

A .avatar {

B width: 50px;

C border-radius: 50;

D height: 50px;

E }

Line C — Line 2 is incorrect because border-radius requires a unit like px or %. A unitless 50 is invalid.

Question 3

A .card:

B border-radius: 12px;

C box-shadow: 0 4px 6px black;

D }

Line A — Line 0 is incorrect because a CSS ruleset must open with a curly brace {, not a colon :.

Question 4

A .button {

B border-radius: 4px;

C background-color: blue;

D box-shadow: 5px;

E }

Line D — Line 3 is incorrect because box-shadow requires at least two size values (horizontal and vertical offset). A single value like 5px is invalid.

Question 5

A .window {

B border-round: 8px;

C box-shadow: 0 2px 4px rgba(0,0,0,0.2);

D }

Line B — Line 1 is incorrect because the standard property name is border-radius, not border-round.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?