CSS border-top-style Property

Posted in CSS Tutorial

Updated on Aug 08, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

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:

Syntax

Copied

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.

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-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.