The border property draws a visible line around an element's padding and content, combining border-width, border-style, and border-color into a single shorthand declaration.

Syntax

border: width style color;

Deep Dive Course

border is shorthand for setting border-width, border-style, and border-color all at once, and border-style is the only one of the three that's actually required for any border to appear at all, since it defaults to none otherwise, regardless of what width or color is specified. Individual sides can be targeted separately with border-top, border-right, border-bottom, and border-left, each accepting the same width/style/color shorthand, and border-radius, a related but separate property, rounds an element's corners rather than styling the border line itself.

1Understanding Borders

💡

A border won't render at all without specifying border-style, since it defaults to none — setting only border-width and border-color without a style is one of the most common reasons a border unexpectedly fails to show up.

editor.html

.box {
  border: 2px solid black;
}

localhost:3000

2Practical Example

Here is a real-world application of Borders showing how it is used in production CSS code.

editor.html

.box {
  border-width: 2px;
  border-color: red;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Borders:

1. Always include a border-style value, like solid or dashed, since border-style defaults to none and no border renders without it, regardless of width or color

2. Use border-top/right/bottom/left individually when only specific sides need a border, rather than the full border shorthand followed by overrides

3. Use the separate border-radius property, not the border shorthand, when you need rounded corners rather than a styled border line

⚠️

Tip: A border won't render at all without specifying border-style, since it defaults to none — setting only border-width and border-color without a style is one of the most common reasons a border unexpectedly fails to show up.

editor.html

.box {
  border: 2px solid black;
}

localhost:3000

Examples

Example 01Basic Usage

.box {
  border: 2px solid black;
}

Example 02Advanced Example

.box {
  border-width: 2px;
  border-color: red;
}

Best Practices

Always include a border-style value, like solid or dashed, since border-style defaults to none and no border renders without it, regardless of width or color
Use border-top/right/bottom/left individually when only specific sides need a border, rather than the full border shorthand followed by overrides
Use the separate border-radius property, not the border shorthand, when you need rounded corners rather than a styled border line

Interview Question

Why does setting only border-width and border-color, without border-style, result in no visible border at all?▼

Hint: Think about what border-style's own default value actually is, and whether a border can render without any style at all.

border-style's default value is none, meaning no border line is drawn at all, regardless of whatever width or color values happen to be specified alongside it — border-width and border-color only control the thickness and color of a border line that's actually being drawn, they have no ability on their own to determine whether a border is drawn in the first place, that's specifically border-style's job, through values like solid, dashed, or dotted. This means specifying a border-width of 2px and a border-color of red, without also explicitly setting a border-style, leaves the browser with no actual line style to render, since it's still defaulting to none, so nothing visible appears despite the other two properties being fully specified. This is exactly why using the full border shorthand, border: 2px solid red, which forces you to specify all three properties together, tends to avoid this particular pitfall compared to setting the three longhand properties separately and potentially forgetting one.

Exercises

MediumPractice using Borders in a real scenario.

View Solution

.box {
  border: 2px solid black;
}

Frequently Asked Questions

Why does setting only border-width and border-color, without border-style, result in no visible border at all?▼

Related Functions

PaddingMarginBox-sizing