CSS Tutorial

CSS Borders

Borders draw a line around an element. With CSS you control their style, thickness, color and even how rounded the corners are.

The three border properties

A border is defined by three things: its style (solid, dashed, dotted and more), its width (thickness) and its color. You must set at least a style for a border to appear.

The core border properties

div {
  border-style: solid;
  border-width: 2px;
  border-color: #2b5cff;
}

Border styles

The border-style property decides what the line looks like. Run the example to compare the most common styles side by side.

Comparing border styles

Example

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    padding: 10px;
    margin: 8px 0;
    font-family: Arial, sans-serif;
    border-width: 3px;
    border-color: #2b5cff;
  }
  .solid  { border-style: solid; }
  .dashed { border-style: dashed; }
  .dotted { border-style: dotted; }
  .double { border-style: double; }
</style>
</head>
<body>
  <div class="solid">solid border</div>
  <div class="dashed">dashed border</div>
  <div class="dotted">dotted border</div>
  <div class="double">double border</div>
</body>
</html>

The border shorthand

Writing three properties every time is tedious, so CSS offers the border shorthand. Give it the width, style and color in one line.

One line for all three

div {
  border: 2px solid #2b5cff;
}

Rounded corners with border-radius

The border-radius property rounds an element's corners. A small value gives gentle rounding; a value of 50% on a square turns it into a circle. This works even without a visible border.

Rounded corners and a circle

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    background-color: #2b5cff;
    color: white;
    padding: 20px;
    margin: 8px 0;
    text-align: center;
    font-family: Arial, sans-serif;
    border-radius: 12px;
  }
  .circle {
    width: 90px;
    height: 90px;
    background-color: tomato;
    border-radius: 50%;
  }
</style>
</head>
<body>
  <div class="box">Rounded corners (12px)</div>
  <div class="circle"></div>
</body>
</html>

Borders on individual sides

You can style just one side using border-top, border-right, border-bottom or border-left. A single colored left border is a popular way to highlight quotes or notes.

A left accent border

.quote {
  border-left: 4px solid #ffb400;
  padding-left: 12px;
}

Border properties reference

Property	Purpose	Example
border-style	Line style	solid, dashed, dotted
border-width	Thickness	2px
border-color	Line color	#2b5cff
border	Shorthand for all three	2px solid blue
border-radius	Rounds the corners	12px or 50%

⚠️

A border adds to an element's total size by default. If you set width: 100px and add a 5px border on each side, the visible box becomes 110px wide unless you use box-sizing: border-box.

Key points

A border needs a style to be visible.
border sets width, style and color in one line.
border-radius rounds corners; 50% makes circles.
You can style single sides with border-top, border-left, etc.
Borders add to an element's total size by default.