Border-radius and box-shadow

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A border-radius

B box-radius

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

A 50%

B 100px

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

A inset

B inside

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

A The spread radius

B The blur radius

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

A No

B Yes

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1.box { border-radius: 50%; }		AMissing a required length unit like px or % after the number.
2.box { box-shadow: inset 0 0 5px black; }		BMissing a color value for the shadow declaration.
3Applies a shadow with a 10px blur radius and no offsets.		CRounds the element corners fully to create a circular or elliptical shape.
4Rounds only the top-left and bottom-right corners of the container.		DApplies a subtle black shadow inside the inner edges of the element.
5.box { border-radius: 10; }		E.box { border-radius: 10px 0; }
6.box { box-shadow: 5px 5px; }		F.box { box-shadow: 0 0 10px gray; }

Definitions

border-radius

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.btn { _____________: 5px; }

.circle { border-radius: ___; }

.box { __________: 5px 5px black; }

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

.img { ______________________: 8px; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .box {

B border-radius = 10px;

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

D }

Question 2

A .avatar {

B width: 50px;

C border-radius: 50;

D height: 50px;

E }

Question 3

A .card:

B border-radius: 12px;

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

D }

Question 4

A .button {

B border-radius: 4px;

C background-color: blue;

D box-shadow: 5px;

E }

Question 5

A .window {

B border-round: 8px;

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

D }

Answer Key

Border-radius and box-shadow

Section A: Quick Questions

A — border-radius

A — 50%

A — inset

B — The blur radius

B — Yes

Section B: 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.

Section C: Definitions

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

Section D: Fill in the Blanks

.btn {
  border-radius: 5px;
}

.circle {
  border-radius: 50%;
}

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

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

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

Section E: Spot the Error

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

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

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

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.

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