Bird
Raised Fist0
CSSmarkup~5 mins

Border 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 you add lines around elements to make them stand out or separate them visually.

To highlight a button or clickable area on a webpage.
To separate sections or boxes on a page clearly.
To create frames around images or text blocks.
To add decorative lines around content for style.
To show focus or selection on form inputs.
Syntax
CSS
selector {
  border: <border-width> <border-style> <border-color>;
}

The border property is a shortcut for setting width, style, and color all at once.

Common border styles include solid, dashed, and dotted.

Examples
This adds a solid black border 2 pixels thick around a <div>.
CSS
div {
  border: 2px solid black;
}
This adds a dashed blue border 1 rem thick around a paragraph.
CSS
p {
  border: 1rem dashed blue;
}
This adds a red dotted border 5 pixels thick around an image.
CSS
img {
  border: 5px dotted red;
}
Sample Program

This example shows a green solid border around a box with text centered inside. The border is 3 pixels thick.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Border Example</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      border: 3px solid #4CAF50;
      padding: 1rem;
      margin: 1rem auto;
      font-family: Arial, sans-serif;
      text-align: center;
      line-height: 100px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="box">This box has a green border</div>
</body>
</html>
OutputSuccess
Important Notes

You can set borders on each side separately using border-top, border-right, border-bottom, and border-left.

If you only set border style or color without width, the border may not show.

Use colors with good contrast to keep borders visible and accessible.

Summary

Borders add lines around elements to separate or highlight them.

Use the border shorthand to set width, style, and color in one line.

Common styles are solid, dashed, and dotted.

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