CSS border Property

The border property is a shorthand used to set an element's border width, style, and color in a single declaration.

selector { border: width style color; }
<line-width> Sets the thickness of the border using absolute lengths or keywords like thin, medium, or thick.
<line-style> Determines the visual pattern of the border line such as solid, dashed, dotted, or double.
<color> Defines the color of the border using hex, RGB, HSL, or keyword color values.

Code Examples

A basic example showing a 5px solid dark gray border applied to a div element.

<div style="border: 5px solid #333333; padding: 20px; background-color: #f4f4f4;">
  This box has a thick solid border.
</div>

An advanced example using JavaScript to dynamically change the border style and color when the user hovers over the element.

<div id="uiBox" style="border: 2px dashed #cccccc; padding: 20px; transition: border 0.3s;">
  Interact with this box.
</div>

<script>
const box = document.getElementById("uiBox");
box.addEventListener("mouseover", () => {
  box.style.border = "2px solid #ff5500";
});
box.addEventListener("mouseout", () => {
  box.style.border = "2px dashed #cccccc";
});
</script>

Pro Tip

You can create clean UI triangles without using images by setting the width and height of an element to zero and using thick borders with different colors. Also, setting a border-color to "transparent" is a great way to reserve space for a border that only appears on hover, preventing the layout from jumping or jittering when the border is applied.

Deep Dive

Think of the border as the fence around your property. It sits right between the padding and the margin. This shorthand is a convenient way to set border-width, border-style, and border-color all at once. If you omit a value, the browser uses the default. Crucially, if you omit the style, the border defaults to "none" and won't show up at all, even if you specified a width and color. By default, the border adds to the total size of your element, which can mess up your layout math. If you want the border to sit inside the defined width and height of the box without expanding it, you should use "box-sizing: border-box;" on your elements.

Best Practices

Use the shorthand property to keep your CSS clean and minimize the amount of code you write. It's best to always provide all three values (width, style, color) to avoid any cross-browser default value confusion. If you only need to change the border on one side, don't use the shorthand to reset everything; use specific properties like border-top or border-left instead. Stick to the standard order of width, style, then color to make your code easier for other developers to read quickly.

Common Pitfalls

The biggest mistake beginners make is forgetting to include the border-style. Without a style like "solid" or "dashed", the border is invisible. Another common issue is the box model behavior where a 1px border can push an element to a new line if you haven't accounted for that extra 2 pixels in your total width. Also, keep in mind that shorthand properties can sometimes reset sub-properties you didn't intend to change if you aren't careful with the cascade.

Accessibility

Borders are vital for users with visual impairments as they provide clear boundaries for interactive elements like buttons and form inputs. Ensure your border color has enough contrast against the background so it's easily visible. Don't rely on color alone to indicate a state change, like an error; consider increasing the border thickness or changing the border style to make the change obvious to everyone, including color-blind users.

Dev Data Table: border property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.border = "2px solid #000000";
js_syntax_2 element.style.setProperty("border", "2px solid #000000");
js_note When using JavaScript to modify borders, remember that setting the shorthand property will overwrite any individual border-side settings you previously applied.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "3.5", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10" }
results render here...