CSS border-top Property

The border-top property is a shorthand used to set the width, style, and color of the top edge of an element's box.

selector { border-top: <border-width> <border-style> <color>; }

<border-width>	Sets the thickness of the top border using specific units or keywords like thin, medium, or thick.
<border-style>	Specifies the line type, such as solid, dashed, dotted, or double.
<color>	Defines the color of the top border using hex, RGB, HSL, or named color values.
initial	Sets the property to its default value.
inherit	Adopts the border-top styling from the parent element.

Code Examples

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

<div style="border-top: 5px solid #333333; padding: 20px;">
  This div has a thick dark gray top border.
</div>

An advanced example using a CSS class and JavaScript to toggle a thick blue top border for a highlight effect.

<style>
  .card {
    width: 300px;
    padding: 20px;
    background: #f4f4f4;
    border: 1px solid #cccccc;
    transition: border-top 0.3s;
  }
  .active-card {
    border-top: 8px solid #007bff;
  }
</style>

<div id="myCard" class="card">Click me to highlight the top.</div>

<script>
  const card = document.getElementById("myCard");
  card.addEventListener("click", function() {
    this.classList.toggle("active-card");
    // Using direct JS style manipulation
    if (this.classList.contains("active-card")) {
      console.log("Top border is now: " + this.style.borderTop);
    }
  });
</script>

Pro Tip

You can use border-top to create simple dividers between list items or sections without needing extra div tags. It is also a handy trick for creating CSS triangles by setting a width and height of zero on an element and manipulating the border widths and colors of different sides.

Deep Dive

Think of border-top like the crown molding at the top of a wall. It allows you to define the visual boundary for only the upper side of an element without affecting the right, bottom, or left sides. This shorthand property combines three individual properties: border-top-width, border-top-style, and border-top-color. If you leave out the color, it defaults to the element's text color. If you leave out the style, no border will appear because the default style is none. In the CSS box model, the border sits right between the padding and the margin.

Best Practices

Use this shorthand to keep your style sheets clean and concise. If you only need to update the color dynamically later on, use the specific border-top-color property to avoid overriding the width and style you already established. Always ensure the border-style is defined, otherwise your border will be invisible regardless of the width or color you provide.

Common Pitfalls

The most frequent mistake is forgetting to include the border-style. It is like buying a gallon of paint but never grabbing a brush; without the style, nothing gets rendered on the screen. Also, remember that borders add to the total width and height of an element unless you have set box-sizing to border-box, which can cause layout shifts you might not expect.

Accessibility

Borders are often used to separate content or highlight active states, like the top of a navigation tab. Ensure that the color you choose for your border has a high enough contrast ratio against the background so users with visual impairments can actually see it. Never rely on color alone to convey important information; use text or icons alongside the border change.

Dev Data Table: border-top property

default	medium none currentColor
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1998
js_syntax_1	element.style.borderTop = "3px solid #ff0000";
js_syntax_2	element.style.setProperty("border-top", "3px solid #ff0000");
js_note	In JavaScript, use the camelCase property borderTop to access the style object directly.
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.1" }