CSS Borders

Border Style

The border-style property defines how the border looks. Common values include:

solid
dotted
dashed
double
none

div {
  border-style: solid;
}

Border Width

Use border-width to set how thick the border appears.

div {
  border-width: 3px;
}

Border Color

The border-color property sets the border’s color. You can use named colors, hex, RGB, etc.

div {
  border-color: green;
}

CSS Border Sides

CSS allows you to style each side of an element’s border individually — top, right, bottom, and left. This is useful when you want different widths, styles, or colors on each side.

Individual Border Properties

border-top – Sets width, style, and color for the top border
border-right – Sets width, style, and color for the right border
border-bottom – Sets width, style, and color for the bottom border
border-left – Sets width, style, and color for the left border

div {
  border-top: 3px solid red;
  border-right: 2px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px double orange;
}

Setting Only One Side

You can style only one side without affecting the others:

p {
  border-bottom: 2px solid black;
}

Mixing with Shorthand

You can also combine different border sides with the border shorthand while overriding specific sides if needed:

div {
  border: 2px solid gray;
  border-top: 5px solid red; /* overrides top side */
}

Shorthand Property

You can combine border-style, border-width, and border-color into one property:

div {
  border: 2px dashed red;
}

Border Radius

The border-radius property rounds the corners of the element’s border.

div {
  border-radius: 10px;
}

Practice Prompt

Try this HTML with inline styles:

<div style="border: 4px dashed blue; border-radius: 10px; padding: 20px; margin-bottom: 20px;">
  Box with a dashed blue border and rounded corners.
</div>

<div style="border: 1px solid black; border-radius: 0; padding: 20px;">
  Box with a solid black border and sharp corners.
</div>

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu