CSS Borders

CSS Borders

CSS borders are used to define the edges of elements. You can control the border’s width, style, color, and shape to create clear visual separation.

Basic Borders

To display a border, you must define at least the border style.

.box {
  border-style: solid;
}

Without a border style, the border will not appear.

Border Width

The border-width property controls how thick the border is.

.box {
  border-style: solid;
  border-width: 2px;
}

You can set different widths for each side:

.box {
  border-style: solid;
  border-width: 2px 4px 6px 8px;
}

Border Color

The border-color property sets the color of the border.

.box {
  border-style: solid;
  border-color: #1f4bd8;
}

Border Sides

You can style individual sides of a border using side-specific properties.

.box {
  border-top: 2px solid #1f4bd8;
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #1f4bd8;
  border-left: 2px solid #ccc;
}

Border Shorthand

The border shorthand property combines width, style, and color in one line.

.box {
  border: 2px solid #1f4bd8;
}

Shorthand makes your CSS shorter and easier to read.

Rounded Borders

Rounded corners are created using the border-radius property.

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
}

You can also create circles by setting a large radius:

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Code Challenge

Goal: Style the box below using border properties.

HTML:

<div class="profile-card">
  <h3>Profile</h3>
  <p>This card uses CSS borders.</p>
</div>

Task:

• Add a solid border around the card
• Set the border color to blue
• Round the corners
• Add some padding

Try a Solution:

.profile-card {
  border: 2px solid #1f4bd8;
  border-radius: 12px;
  padding: 16px;
  max-width: 420px;
}

What’s Next?

Next, you will learn how to control spacing outside elements using CSS margins.