Bird
Raised Fist0
CSSmarkup~30 mins

Border styles 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
Border styles
📖 Scenario: You are creating a simple webpage with a box that needs different border styles to show how borders can look.
🎯 Goal: Build a webpage with a <div> box that uses different CSS border styles: solid, dashed, dotted, and double.
📋 What You'll Learn
Create a <div> with class box in HTML
Add a CSS variable called borderWidth with value 0.2rem
Use the CSS variable borderWidth to set the border width
Apply four different border styles: solid, dashed, dotted, and double
Make sure the box is visible with a fixed width and height
Use semantic HTML5 structure
💡 Why This Matters
🌍 Real World
Borders are used in web design to separate content, highlight sections, and improve visual appeal. Knowing how to style borders helps create clear and attractive layouts.
💼 Career
Front-end developers often style borders to match design requirements. Understanding border styles and CSS variables is essential for building maintainable and scalable websites.
Progress0 / 4 steps
1
Create the HTML structure with a box
Create a <main> element containing a <div> with class box. This will be the box to style.
CSS
Hint

Use semantic <main> and add a <div> with class box.

2
Add a CSS variable for border width
Add a CSS variable called --borderWidth with the value 0.2rem inside the :root selector.
CSS
Hint

Use :root to define the CSS variable --borderWidth with value 0.2rem.

3
Apply different border styles using the CSS variable
Add CSS for the .box class to set width and height to 10rem. Then add four borders: top border with style solid, right border with style dashed, bottom border with style dotted, and left border with style double. Use the CSS variable --borderWidth for all border widths and set the border color to black.
CSS
Hint

Set fixed width and height for the box. Use the CSS variable --borderWidth for all borders. Apply the four border styles on each side.

4
Complete the HTML with language and meta tags
Add the full HTML5 document structure with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Place the existing <style> and <main> inside the <body>.
CSS
Hint

Wrap your existing code in a full HTML5 document with language and meta tags for charset and viewport.

Practice

(1/5)
1. Which CSS border-style value creates a solid continuous line around an element?
easy
A. double
B. dotted
C. none
D. solid

Solution

  1. Step 1: Understand border-style values

    The border-style property controls the line style of borders. Common values include solid, dotted, dashed, and double.

  2. Step 2: Identify the solid line style

    The solid value creates a continuous, unbroken line around the element.

  3. Final Answer:

    solid -> Option D

  4. Quick Check:

    Solid border = continuous line [OK]
Hint: Solid means one continuous line, no breaks [OK]
Common Mistakes:
  • Confusing 'dotted' with 'solid'
  • Choosing 'double' thinking it's solid
  • Selecting 'none' which means no border
2. Which of the following is the correct CSS syntax to set a dashed border style on a div?
easy
A. div { border-style: dash; }
B. div { border-style: dashed; }
C. div { border-style: dashes; }
D. div { border-style: dot; }

Solution

  1. Step 1: Recall correct border-style values

    The valid CSS value for a dashed border is dashed. Incorrect values like dash, dashes, or dot are not recognized.

  2. Step 2: Check syntax correctness

    The syntax border-style: dashed; correctly applies a dashed border style to the element.

  3. Final Answer:

    div { border-style: dashed; } -> Option B

  4. Quick Check:

    Dashed border uses 'dashed' keyword [OK]
Hint: Use 'dashed' exactly, not 'dash' or 'dashes' [OK]
Common Mistakes:
  • Using incorrect keywords like 'dash' or 'dot'
  • Missing semicolon at the end
  • Applying border-style to wrong selector
3. What will be the visible border style of this CSS code?
p {
  border-width: 3px;
  border-style: double;
  border-color: blue;
}
medium
A. Two parallel blue lines with space between, total 3px thick
B. A single solid blue border 3px thick
C. A dotted blue border 3px thick
D. No visible border

Solution

  1. Step 1: Understand the 'double' border style

    The double border style draws two parallel lines with a small space between them. The total thickness is controlled by border-width.

  2. Step 2: Apply the given CSS properties

    The border is blue, 3px wide, and double style, so you see two blue lines side by side with a gap, all within 3px total width.

  3. Final Answer:

    Two parallel blue lines with space between, total 3px thick -> Option A

  4. Quick Check:

    Double border = two lines with gap [OK]
Hint: Double border shows two lines, not one [OK]
Common Mistakes:
  • Thinking 'double' means thicker solid line
  • Confusing 'double' with 'dotted'
  • Ignoring border-width effect
4. Identify the error in this CSS snippet that prevents the border from showing:
div {
  border-style: solid;
  border-width: 0;
  border-color: red;
}
medium
A. border-width is set to 0, so border is invisible
B. Missing border property shorthand
C. border-color 'red' is not a valid color
D. border-style 'solid' is invalid

Solution

  1. Step 1: Check border-width value

    The border width is set to 0, which means no visible border thickness.

  2. Step 2: Understand effect on border visibility

    Even though style is solid and color is red, a 0 width border won't show on the page.

  3. Final Answer:

    border-width is set to 0, so border is invisible -> Option A

  4. Quick Check:

    Border width 0 means no visible border [OK]
Hint: Border width 0 hides border even if style and color set [OK]
Common Mistakes:
  • Thinking 'solid' is invalid
  • Assuming color affects visibility alone
  • Believing shorthand is required
5. You want to create a responsive card with a border that changes style on hover: solid normally and dotted on hover. Which CSS code correctly achieves this?
hard
A. div.card { border-style: solid dotted; } div.card:hover { border-style: dotted solid; }
B. div.card { border-style: dotted; } div.card:hover { border-style: solid; }
C. div.card { border-style: solid; } div.card:hover { border-style: dotted; }
D. div.card { border-style: solid; border-hover-style: dotted; }

Solution

  1. Step 1: Set default border style

    The card's normal border style should be solid, so div.card { border-style: solid; } sets this correctly.

  2. Step 2: Change border style on hover

    Using the hover pseudo-class, div.card:hover { border-style: dotted; } changes the border style to dotted when the mouse is over the card.

  3. Final Answer:

    div.card { border-style: solid; } div.card:hover { border-style: dotted; } -> Option C

  4. Quick Check:

    Use :hover to change border-style dynamically [OK]
Hint: Use :hover selector to change border style on mouseover [OK]
Common Mistakes:
  • Using invalid property 'border-hover-style'
  • Swapping default and hover styles
  • Trying to set two styles in one property incorrectly