CSS border-top-width Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-top-width property in CSS is used to set the width of the top border of an element.

This property allows you to control the thickness of the top border, which can be particularly useful when designing layouts or emphasizing specific parts of your content.

💡 Syntax

The syntax for the border-top-width property is simple and follows the standard CSS property-value format:

Syntax

Copied

element {
  border-top-width: value;
}

Here, value can be specified in various units or predefined keywords.

🎛️ Default Value

The default value of the border-top-width property is medium. This corresponds to a browser-defined width that typically results in a visible but not too thick border.

🏠 Property Values

Value	Description
thin	A thin top border.
medium	A medium top border (default).
thick	A thick top border.
length	A specific width, such as 2px, 0.5em, or 4mm.
initial	Sets the property to its default value.
inherit	Inherits the value from its parent element.

📄 Example

In this example, we'll set different top border widths for two paragraphs to illustrate the effect of the border-top-width property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-top-width Example</title>
  <style>
    p.thin-border {
      border-top-width: thin;
      border-style: solid;
      border-color: black;
    }

    p.thick-border {
      border-top-width: thick;
      border-style: solid;
      border-color: black;
    }
  </style>
</head>
<body>
  <h1>Border Top Width Example</h1>
  <p class="thin-border">This paragraph has a thin top border.</p>
  <p class="thick-border">This paragraph has a thick top border.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-top-width property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in older browsers, making it a reliable choice for consistent styling across different platforms.

🎉 Conclusion

The border-top-width property is a versatile CSS tool that allows you to fine-tune the appearance of your elements.

Whether you need a subtle border or a bold, thick line, this property provides the flexibility to create the exact look you want. By understanding how to use different values, you can effectively enhance the visual hierarchy and design of your web pages.