![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-top-style Property
![CSS border-top-style Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-top-style.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-top-style
property in CSS is used to set the style of the top border of an element.
This property is one of the border properties that allows you to control the appearance of the borders around elements. By specifying different border styles, you can create a variety of visual effects that enhance the design of your website.
💡 Syntax
The syntax for the border-top-style
property is as follows:
element {
border-top-style: style;
}
Here, style represents the type of border you want to apply to the top edge of the element.
🎛️ Default Value
The default value of the border-top-style
property is none, which means that no border is displayed by default.
🏠 Property Values
The border-top-style
property accepts several predefined values:
Value | Description |
---|---|
none | No border is displayed. |
solid | A single solid line. |
dotted | A series of round dots. |
dashed | A series of square-ended dashes. |
double | Two solid lines. The space between the lines is defined by the width of the border. |
groove | A 3D grooved border that appears as if it is carved into the page. |
ridge | A 3D ridged border that appears as if it is coming out of the page. |
inset | A 3D inset border that makes the element appear embedded. |
outset | A 3D outset border that makes the element appear to be coming out of the screen. |
hidden | The same as none, but used when you want to turn off a border that would otherwise be set. |
📄 Example
In this example, we'll apply different styles to the top border of a <div> element.
<!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-style Example</title>
<style>
.solid-border {
border-top-style: solid;
border-top-width: 4px;
border-top-color: black;
}
.dotted-border {
border-top-style: dotted;
border-top-width: 4px;
border-top-color: red;
}
.dashed-border {
border-top-style: dashed;
border-top-width: 4px;
border-top-color: blue;
}
</style>
</head>
<body>
<h1>Top Border Styles</h1>
<div class="solid-border">Solid Border</div>
<div class="dotted-border">Dotted Border</div>
<div class="dashed-border">Dashed Border</div>
</body>
</html>
🖥️ Browser Compatibility
The border-top-style
property is widely supported across all modern browsers. You can confidently use this property knowing that it will render consistently for most users.
🎉 Conclusion
The border-top-style
property is an essential tool for web developers who want to customize the appearance of their website's borders. By experimenting with different styles, you can create unique visual effects that enhance the user experience. Whether you want a simple solid border or a more complex grooved or ridged effect, this property provides the flexibility you need to achieve your design goals.
👨💻 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-style Property), please comment here. I will help you immediately.