Border in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What CSS property is used to add a border around an element?

The border property is used to add a border around an element. It can set the width, style, and color of the border.

beginner

How do you make a border that is 2 pixels thick, solid, and red?

Use border: 2px solid red;. This sets the border width to 2 pixels, style to solid, and color to red.

beginner

What are some common border styles you can use in CSS?

Common border styles include solid, dashed, dotted, double, and none.

intermediate

How can you add different borders to each side of an element?

Use the side-specific properties: border-top, border-right, border-bottom, and border-left.

beginner

What does the CSS property border-radius do?

border-radius rounds the corners of the border, making them curved instead of sharp.

Which CSS property controls the thickness of a border?

A border-style

B border-width

C border-color

D border-radius

border-width sets how thick the border is.

What value for border-style creates a dashed border?

A solid

B double

C dotted

D dashed

dashed creates a border made of dashes.

How do you remove a border from an element?

A All of the above

B border: 0px solid;

C border: none;

D border-style: hidden;

All these ways remove the border visually.

Which property rounds the corners of a border?

A border-radius

B border-style

C border-color

D border-width

border-radius makes corners rounded.

If you want a different border on the top and bottom, which properties do you use?

A border-width and border-style

B border-left and border-right

C border-top and border-bottom

D border-color and border-radius

border-top and border-bottom let you style top and bottom borders separately.

Explain how to create a red, 3px thick, dotted border around a box in CSS.

Think about the order: width, style, color.

Describe how you can make only the left border of an element blue and 5 pixels wide.

Remember you need to set style along with width and color.

Practice

1. What does the CSS border property do?

easy

A. Changes the background color of an element

B. Adds a line around an element to separate or highlight it

C. Sets the font size of text inside an element

D. Removes the element from the page

Solution

1. Step 1: Understand the purpose of the border property

   The border property in CSS is used to add a visible line around an element.

2. Step 2: Compare with other options

   Other options describe unrelated CSS properties like background color or font size, which are not related to borders.

3. Final Answer:

   Adds a line around an element to separate or highlight it -> Option B

4. Quick Check:

   Border = line around element [OK]

Hint: Border means line around element edges [OK]

Common Mistakes:

• Confusing border with background color
• Thinking border changes text size
• Assuming border removes element

2. Which of the following is the correct CSS syntax to set a solid red border of 2px thickness?

easy

A. border: 2 solid red px;

B. border: soild 2px red;

C. border: red 2px soild;

D. border: 2px solid red;

Solution

1. Step 1: Recall the correct order in border shorthand

   The correct order is border-width, border-style, then border-color.

2. Step 2: Check each option's order

   border: 2px solid red; follows the correct order: 2px (width), solid (style), red (color). Others have wrong order or invalid syntax.

3. Final Answer:

   border: 2px solid red; -> Option D

4. Quick Check:

   Width Style Color order = correct [OK]

Hint: Remember: width style color order in border [OK]

Common Mistakes:

• Mixing order of width, style, and color
• Using invalid units or missing units
• Putting color before style

3. What will be the visible border style of this CSS rule?

div { border: 3px dashed blue; }

medium

A. 3px thick dashed blue border

B. 3px thick solid blue border

C. 3px thick dotted red border

D. No border will appear

Solution

1. Step 1: Read the border shorthand values

   The rule sets border width to 3px, style to dashed, and color to blue.

2. Step 2: Match the description to the options

   The option describing a 3px thick dashed blue border correctly matches the CSS rule. Others mismatch style, color, or visibility.

3. Final Answer:

   3px thick dashed blue border -> Option A

4. Quick Check:

   3px dashed blue = dashed border [OK]

Hint: Match border style word exactly (solid, dashed, dotted) [OK]

Common Mistakes:

• Confusing dashed with dotted or solid
• Ignoring the color specified
• Assuming no border if style is unknown

4. Identify the error in this CSS border declaration:

p { border: 5px dotted; }

medium

A. Border width unit is incorrect

B. Dotted is not a valid border style

C. Missing border color value

D. Border property cannot be used on paragraphs

Solution

1. Step 1: Check the border shorthand completeness

   The border shorthand requires width, style, and optionally color. Here, color is missing.

2. Step 2: Verify other options

   Width unit '5px' is correct, 'dotted' is valid style, and border can be applied to paragraphs.

3. Final Answer:

   Missing border color value -> Option C

4. Quick Check:

   Border shorthand needs width, style, color [OK]

Hint: Border shorthand needs width, style, and color [OK]

Common Mistakes:

• Forgetting to add color in border shorthand
• Thinking dotted is invalid style
• Assuming border can't be on text elements

5. You want to create a responsive card with a border that changes thickness on smaller screens. Which CSS approach correctly applies a 4px solid black border normally, and a 2px solid black border on screens narrower than 600px?

hard

A. .card { border: 4px solid black; } @media (max-width: 600px) { .card { border: 2px solid black; } }

B. #card { border: 4px solid black; } @media (min-width: 600px) { #card { border: 2px solid black; } }

C. card { border: 4px solid black; } @media (max-width: 600px) { card { border: 2px solid black; } }

D. .card { border: 4px solid black; } @media (min-width: 600px) { .card { border: 2px solid black; } }

Solution

1. Step 1: Identify correct selector syntax

   Classes require a dot prefix, so '.card' is correct, 'card' without dot is invalid.

2. Step 2: Check media query logic for screen width

   To apply styles on screens narrower than 600px, use max-width: 600px. Options using min-width apply to wider screens.

3. Final Answer:

   .card { border: 4px solid black; } @media (max-width: 600px) { .card { border: 2px solid black; } } -> Option A

4. Quick Check:

   Class selector + max-width media query = correct [OK]

Hint: Use .class selector and max-width for smaller screens [OK]

Common Mistakes:

• Missing dot for class selector
• Using min-width instead of max-width for smaller screens
• Incorrect nesting of media query rules