CSS Borders

Borders in CSS let us visually define the edges of an HTML element—whether it’s a heading, paragraph, image, or container. With borders, you can make elements stand out, separate sections, or simply improve the visual structure of your page.

Border Style

The border-style property lets you define how the border looks.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    /* Border style examples */
    .none {
      border-style: none;
    }

    .hidden {
      border-style: hidden;
    }

    .dotted {
      border-style: dotted;
    }

    .dashed {
      border-style: dashed;
    }

    .solid {
      border-style: solid;
    }

    .double {
      border-style: double;
    }

    .groove {
      border-style: groove;
    }

    .ridge {
      border-style: ridge;
    }

    .inset {
      border-style: inset;
    }

    .outset {
      border-style: outset;
    }
  </style>
</head>
<body>
  <p class="none">No Border</p>
  <p class="hidden">Hidden Border</p>
  <p class="dotted">Dotted Style</p>
  <p class="dashed">Dashed Style</p>
  <p class="solid">Solid Style</p>
  <p class="double">Double Border</p>
  <p class="groove">Groove Style</p>
  <p class="ridge">Ridge Style</p>
  <p class="inset">Inset Border</p>
  <p class="outset">Outset Border</p>
</body>
</html>

Border Color

Use the border-color property to change the color of a border. You can apply named colors, HEX, RGB, or HSL formats.

				
					<!DOCTYPE html>
<html>
<head>
  <style>
    /* Border color examples */
    .box1 {
      border: 2px dotted purple;
    }

    .box2 {
      border: 3px dashed #FF5733;
    }

    .box3 {
      border: 4px solid rgb(60, 179, 113);
    }

    .box4 {
      border: 2px double hsl(200, 70%, 40%);
    }
  </style>
</head>
<body>
  <p class="box1">Purple Dotted Border</p>
  <p class="box2">Orange Dashed Border</p>
  <p class="box3">Green Solid Border</p>
  <p class="box4">Blue HSL Double Border</p>
</body>
</html>

Border Width

The border-width property controls how thick or thin your border is.

				
					<!DOCTYPE html>
<html>

<head>
  <style>
    .thick {
      border-width: 5px;
      border-style: solid;
      border-color: steelblue;
    }

    .thin {
      border-width: thin;
      border-style: solid;
      border-color: crimson;
    }
  </style>
</head>

<body>
  <p class="thick">5px Thick Border</p>
  <p class="thin">Thin Border</p>
</body>

</html>

Border Radius – Rounded Bord

The border-radius property is used to create rounded corners.

You can also control each corner separately:

				
					<!DOCTYPE html>
<html>

<head>
  <style>
    .rounded-box {
      border: 2px solid navy;
      border-radius: 15px;
    }

    .circle-box {
      border: 2px solid darkorange;
      border-radius: 50%;
    }

    .custom-corners {
      border: 2px solid teal;
      border-radius: 10px 20px 30px 40px;
    }
  </style>
</head>

<body>
  <p class="rounded-box">Rounded Border</p>
  <p class="circle-box">Circle-like Border</p>
  <p class="custom-corners">Each corner has different curve</p>
</body>
</html>

Borders in Tables – Border Collapse

When working with tables, borders of adjacent cells can either be separated or collapsed into one.

				
					<!DOCTYPE html>
<html>

<head>
  <style>
    .collapsed-table {
      border-collapse: collapse;
    }

    .separated-table {
      border-collapse: separate;
      border-spacing: 8px;
    }
  </style>
</head>

<body>
  <table class="collapsed-table" border="1">
    <tr>
      <td>Item A</td>
      <td>Item B</td>
    </tr>
  </table>

  <table class="separated-table" border="1">
    <tr>
      <td>Item X</td>
      <td>Item Y</td>
    </tr>
  </table>

</body>

</html>

Border Shorthand

You can use one line to set width, style, and color:

				
					<!DOCTYPE html>
<html>

<head>
  <style>
    .quick-border {
      border: 3px dashed darkgreen;
    }
  </style>
</head>

<body>
  <p class="quick-border">This is a dashed green border</p>
</body>

</html>

Summary

Here’s what you can style with borders in CSS:.

Style: solid, dotted, dashed, double, etc.
Width: thin, medium, thick, or pixels
Color: named, HEX, RGB, or HSL
Radius: rounded corners
Collapse & spacing: in tables
Shorthand: everything in one line!