Bird
Raised Fist0
CSSmarkup~15 mins

Border in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Create a Stylish Border Around a Box
📖 Scenario: You want to make a box stand out on a webpage by adding a border around it. Borders help separate content and make it look neat.
🎯 Goal: Build a simple webpage with a box that has a red, solid border that is 4 pixels thick.
📋 What You'll Learn
Create an HTML element with a class box
Add CSS to style the .box with a border
The border must be 4 pixels thick, solid style, and red color
The box should have some padding so the content inside is not touching the border
Use semantic HTML and ensure the page is responsive
💡 Why This Matters
🌍 Real World
Borders are used in websites to highlight sections, separate content, and improve visual design.
💼 Career
Knowing how to style borders is a basic skill for front-end web developers and designers to create visually appealing layouts.
Progress0 / 4 steps
1
Create the HTML structure with a box
Write the HTML code to create a <div> element with the class box inside the <main> section. Add the text Content inside the box inside this div.
CSS
Hint

Use a <div> tag with class="box" inside the <main> tag.

2
Add a CSS style block and define the border thickness
Inside the <head> section, add a <style> block. Inside it, create a CSS rule for the class .box and set the border width to 4px using the border-width property.
CSS
Hint

Use border-width: 4px; inside the .box CSS rule.

3
Add border style and color to the box
In the existing .box CSS rule, add border-style: solid; and border-color: red; to make the border solid and red.
CSS
Hint

Add border-style: solid; and border-color: red; inside the .box CSS rule.

4
Add padding inside the box for spacing
In the .box CSS rule, add padding: 1rem; to create space between the border and the text inside the box.
CSS
Hint

Use padding: 1rem; inside the .box CSS rule to add space inside the box.

Practice

(1/5)
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