Border styles in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What CSS property is used to set the style of a border?

The border-style property sets the style of an element's border, such as solid, dashed, or dotted.

beginner

Name three common border styles in CSS.

Three common border styles are solid (a continuous line), dashed (a line made of dashes), and dotted (a line made of dots).

beginner

How do you remove a border from an element using CSS?

Set border-style: none; or border: none; to remove the border completely.

intermediate

What does the border-style: inset; do?

It creates a border that makes the element look like it is embedded or pressed into the page, giving a 3D effect.

intermediate

Can you set different border styles for each side of an element? How?

Yes. Use border-top-style, border-right-style, border-bottom-style, and border-left-style to set styles individually.

Which CSS value will create a dotted border?

A solid

B dotted

C double

D groove

The dotted value creates a border made of dots.

How do you remove all borders from an element?

A border-style: none;

B border-style: hidden;

C border-style: solid;

D border-style: dashed;

Setting border-style: none; removes the border.

Which property sets the border style for the left side only?

A border-left

B border-style-left

C border-left-style

D border-style

border-left-style sets the style for the left border only.

What border style gives a 3D pressed look?

A inset

B ridge

C dotted

D solid

inset makes the border look pressed into the page.

Which border style creates two solid lines with space between?

A dashed

B groove

C solid

D double

double creates two solid lines separated by space.

Explain how to set different border styles on each side of a box in CSS.

Think about how you can control each side separately.

Describe the visual difference between the border styles: solid, dashed, and dotted.

Imagine drawing lines with a pen, a dashed line, and dots.