CSS border Property

Definition and Usage

The border property is a shorthand that sets border-width, border-style, and border-color on all four sides at once.

A border only appears when the style is not none. Width defaults to medium and color to currentColor when omitted. For one side only, use border-top and the other side longhands instead.

CSS Syntax

Write one to three values, in any order. The usual order is width, style, then color: border: 2px solid black;.

Property Values

How to Use border

Pick a style first so the line is visible, then set width and color as needed.

1. Choose the element that should have a border on every side.
2. Set a style such as solid, dashed, or dotted. Without a style, nothing draws.
3. Add a width and color when you want them. Omit them to use medium and currentColor.
4. Remember: border also resets border-image to none.

Live Preview

Change the border shorthand on the box and watch all four sides update together.

CSS Examples

Each snippet focuses on the border shorthand. Use Try It Yourself for a live editor.

<style>
  div {
    border: 2px solid #0f172a;
    padding: 12px;
  }
</style>

<div>Solid border</div>

<style>
  div {
    border: 3px dashed #2563eb;
    padding: 12px;
  }
</style>

<div>Dashed border</div>

<style>
  div {
    border: 6px double #0f766e;
    padding: 12px;
  }
</style>

<div>Double border</div>

Key Takeaways