BeingXpert Learn & Build Future

8. CSS Borders

What you will learn

  • How to add a border
  • Border styles, widths, and colours
  • How to style individual sides
  • Rounded corners and outlines

The border shorthand

A border needs a width, a style, and a colour. The shorthand writes all three in one line:

Example

<style>
  p {
    border: 2px solid #0d6efd;
    padding: 10px;
  }
</style>

<p>A paragraph with a blue border.</p>

Output

A paragraph with a blue border.

The border style is essential. Without it (for example border: 2px blue;), no border appears at all.

Border styles

Example

<style>
  p { padding: 6px; margin: 6px 0; }
  .a { border: 3px solid navy; }
  .b { border: 3px dashed navy; }
  .c { border: 3px dotted navy; }
  .d { border: 4px double navy; }
</style>

<p class="a">solid</p>
<p class="b">dashed</p>
<p class="c">dotted</p>
<p class="d">double</p>

Output

solid

dashed

dotted

double

Separate properties

Property Example
border-width border-width: 4px;
border-style border-style: dashed;
border-color border-color: crimson;

Individual sides

Use border-top, border-right, border-bottom, and border-left to style one side.

Example

<style>
  .note {
    border-left: 6px solid #0d6efd;
    background-color: #eaf5ff;
    padding: 12px;
  }
  h2 {
    border-bottom: 2px solid #cfe6ff;
  }
</style>

<h2>A heading with an underline</h2>
<p class="note">A note with a thick blue left border.</p>

Output

A heading with an underline

A note with a thick blue left border.

Rounded corners

border-radius rounds the corners. A very large value, or 50% on a square, makes a circle.

Example

<style>
  .round { border: 2px solid #0d6efd; border-radius: 12px; padding: 12px; }
  .circle {
    width: 80px;
    height: 80px;
    background-color: #0d6efd;
    border-radius: 50%;
  }
</style>

<p class="round">Rounded corners</p>
<div class="circle"></div>

Output

Rounded corners

Outline

An outline looks like a border but is drawn outside the element and takes no space. Browsers use it to show keyboard focus, so never remove it without giving a clear replacement.

Example

<style>
  button:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
  }
</style>

<button type="button">Press Tab to focus me</button>

Common mistakes

  • Leaving out the border style, so nothing shows.
  • Expecting border-radius to work without a visible border or background.
  • Using outline: none and offering no replacement focus indicator.
  • Adding a border without noticing it makes the element bigger. You will learn why in the Box Model lesson.

Exercise

Give .card a 2px solid border in #cfe6ff, rounded corners of 10px, and 16px of padding.

Show solution 
<style>
  .card {
    border: 2px solid #cfe6ff;
    border-radius: 10px;
    padding: 16px;
  }
</style>
<p class="card">A card.</p>

Knowledge check

1. Which three values make up the border shorthand?

Width, style, and colour.

2. Which property rounds corners?

border-radius

3. What happens if you omit the border style?

No border appears.

Summary

  • Use border: width style color;.
  • Style single sides with border-top and the others.
  • border-radius rounds corners, and outlines show focus.
Scroll to Top