0
0
CSSmarkup~5 mins

Border styles in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.