Bird
Raised Fist0
CSSmarkup~5 mins

Border styles in CSS

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
Introduction
Borders help separate parts of a webpage visually. They make sections clear and attractive.
To highlight a button or link on a page.
To separate different sections like header, main content, and footer.
To create boxes around images or text for emphasis.
To add decoration or style to elements.
To show focus on form fields when users click them.
Syntax
CSS
selector {
  border-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset;
}
Use border-style to set the type of border around an element.
You can combine border-style with border-width and border-color for full border control.
Examples
A solid line border around the div.
CSS
div {
  border-style: solid;
}
A dotted border around the paragraph.
CSS
p {
  border-style: dotted;
}
A dashed border around the button.
CSS
button {
  border-style: dashed;
}
A double line border around the section.
CSS
section {
  border-style: double;
}
Sample Program
This page shows four boxes with different border styles: solid, dotted, dashed, and double. Each box has some padding and margin for spacing.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Border Styles Example</title>
  <style>
    .solid-border {
      border-style: solid;
      border-width: 0.2rem;
      border-color: #007acc;
      padding: 1rem;
      margin: 1rem 0;
    }
    .dotted-border {
      border-style: dotted;
      border-width: 0.2rem;
      border-color: #e67e22;
      padding: 1rem;
      margin: 1rem 0;
    }
    .dashed-border {
      border-style: dashed;
      border-width: 0.2rem;
      border-color: #27ae60;
      padding: 1rem;
      margin: 1rem 0;
    }
    .double-border {
      border-style: double;
      border-width: 0.4rem;
      border-color: #c0392b;
      padding: 1rem;
      margin: 1rem 0;
    }
  </style>
</head>
<body>
  <section class="solid-border">This box has a solid border.</section>
  <section class="dotted-border">This box has a dotted border.</section>
  <section class="dashed-border">This box has a dashed border.</section>
  <section class="double-border">This box has a double border.</section>
</body>
</html>
OutputSuccess
Important Notes
If you set border-style to none, no border will show even if width and color are set.
Borders can be set on all sides at once or individually using border-top-style, border-right-style, etc.
Use colors with good contrast to keep borders visible and accessible.
Summary
Border styles control how the border lines look around elements.
Common styles include solid, dotted, dashed, and double lines.
Borders help organize and decorate webpage parts clearly.

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