CSS border-top-width Property

This property sets the thickness of the top border on an element.

selector { border-top-width: value; }
thin Sets a thin top border, which browsers typically render as 1px.
medium Sets a medium top border, which browsers typically render as 3px.
thick Sets a thick top border, which browsers typically render as 5px.
<length> Defines a specific thickness using standard web units like px, em, rem, or vh.

Code Examples

A basic example showing a 10px solid red top border applied directly to a div element.

<div style="border-top-style: solid; border-top-width: 10px; border-top-color: #ff0000; padding: 20px;">
  This box has a thick 10px red top border.
</div>

An advanced example using JavaScript and CSS transitions to smoothly animate the thickness of the top border on mouse interaction.

<style>
  .dynamic-box {
    border-top: 2px solid #333333;
    padding: 20px;
    transition: border-top-width 0.3s ease;
  }
</style>

<div id="box" class="dynamic-box">Hover over me to thicken the top border.</div>

<script>
  const box = document.getElementById("box");
  box.addEventListener("mouseenter", () => {
    box.style.borderTopWidth = "20px";
  });
  box.addEventListener("mouseleave", () => {
    box.style.borderTopWidth = "2px";
  });
</script>

Pro Tip

You can create CSS triangles by setting the height and width of an element to 0 and manipulating the border-top-width against transparent side borders. It is a classic trick for creating tooltips and speech bubble pointers without using images.

Deep Dive

Think of this property as choosing the thickness of a piece of lumber for the top of a door frame. It only affects the top edge of the box model. For the width to actually show up, you must also define a border-top-style, otherwise the border has a width but no visible 'ink'. By default, the width is added to the outside of the content unless you are using box-sizing: border-box, in which case the border eats into the element's total height.

Best Practices

Use rem or em units if you want the border thickness to scale naturally when users resize their text. If you need pixel-perfect hairlines for UI dividers, stick with px units. Always ensure you have a border-style declared, or your width settings will be ignored by the browser.

Common Pitfalls

The biggest rookie mistake is setting a border-top-width and wondering why nothing is showing up. You must set border-top-style to something like solid or dashed first. Also, remember that the default value is medium, not 0, so if you see a border you didn't ask for, you might need to set the style to none.

Accessibility

If you use a very thin border as a visual cue for focus or active states, make sure it has high enough color contrast against the background so users with low vision can actually see the boundary.

Dev Data Table: border-top-width property

default medium
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.borderTopWidth = "5px";
js_syntax_2 element.style.setProperty("border-top-width", "5px");
js_note To get the accurate computed thickness in a script, use the getComputedStyle method which returns the value in pixels.
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...