![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-top-width Property
![CSS border-top-width Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-top-width.webp)
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:
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-top-width Property), please comment here. I will help you immediately.