CSS border-width Property

The border-width property sets the thickness of an element's border for all four sides.

selector { border-width: value; }
thin Sets a thin border width, typically resulting in a 1px thickness.
medium The default width value, typically resulting in a 3px thickness.
thick Sets a thick border width, typically resulting in a 5px thickness.
<length> Allows specific thickness using units such as px, em, rem, or cm.

Code Examples

A basic example showing the clockwise shorthand for setting unique widths on every side of an element.

<div style="border-style: solid; border-width: 10px 2px 5px 20px; border-color: #333333; padding: 20px;">
  This box uses four different border widths for the top, right, bottom, and left sides.
</div>

An advanced example using JavaScript to dynamically increase the border-width of an element when a button is clicked.

<div id="frame" style="border: 2px solid #007bff; padding: 20px; transition: border-width 0.2s;">
  Interactive Border Thickness
</div>
<button onclick="changeWidth()">Thicken Border</button>

<script>
function changeWidth() {
  const el = document.getElementById("frame");
  const currentWidth = parseInt(window.getComputedStyle(el).borderTopWidth);
  el.style.borderWidth = (currentWidth + 5) + "px";
  el.style.borderColor = "#ff0000";
}
</script>

Pro Tip

To remember the order of the four shorthand values, use the acronym "TRBL", which stands for "Top, Right, Bottom, Left". It sounds like the word "Trouble", and it will save you from having to write four separate CSS properties to style each side individually.

Deep Dive

Think of border-width as the physical thickness of a wooden frame around a picture. In the CSS Box Model, this property determines the space occupied by the border layer, sitting between the margin and the padding. You can supply between one and four values to target specific sides. One value applies to all sides. Two values apply the first to the top and bottom, and the second to the left and right. Three values apply the first to the top, the second to the left and right, and the third to the bottom. Four values apply to the top, right, bottom, and left respectively in a clockwise motion. Note that the width only becomes visible if the "border-style" is also set to something other than "none" or "hidden".

Best Practices

For most web interfaces, use "px" units to ensure borders look crisp and consistent across different screens. If you want the border thickness to scale relative to the font size of the element, use "em" units. Always define a "border-style" alongside your width, or the browser will default to "none" and your width will effectively be ignored.

Common Pitfalls

The most common headache for beginners is setting a border-width and wondering why it is not showing up. This happens because the default "border-style" is "none". You must set a style like "solid" or "dashed" to see the width. Also, remember that by default, adding border width increases the total size of the element. Use "box-sizing: border-box;" to keep the element's total width and height consistent regardless of the border thickness.

Accessibility

Borders provide visual cues for element boundaries. Ensure your border-width is thick enough to be seen by users with visual impairments. Avoid using thickness as the only way to convey meaning or state changes, and always maintain high contrast between the border color and the background.

Dev Data Table: border-width property

default medium
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderWidth = "5px";
js_syntax_2 element.style.setProperty("border-width", "5px");
js_note When manipulating this property in JavaScript, ensure you include a unit like "px" or "em" for the value to take effect.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...