Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of border-top-style property in CSS
The border-top-style property changes the style of the top border of an element. This CSS property allows you to define different visual styles for the top border, such as solid, dashed, dotted, and more.
Syntax
border-top-style: value;
Available Values
The border-top-style property accepts the following values:
- none - No border (default)
- solid - A solid line
- dashed - A dashed line
- dotted - A dotted line
- double - Two solid lines
- groove - A 3D grooved border
- ridge - A 3D ridged border
- inset - A 3D inset border
- outset - A 3D outset border
Example: Different Border Styles
<html>
<head>
<style>
.demo {
border-width: 4px;
border-color: #333;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="demo" style="border-top-style: solid;">
Solid top border
</p>
<p class="demo" style="border-top-style: dashed;">
Dashed top border
</p>
<p class="demo" style="border-top-style: dotted;">
Dotted top border
</p>
<p class="demo" style="border-top-style: double;">
Double top border
</p>
</body>
</html>
Example: Combined with Other Border Properties
<html>
<head>
<style>
.border-example {
border-top-width: 5px;
border-top-style: ridge;
border-top-color: blue;
padding: 15px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="border-example">
This element has a blue ridge-style top border that is 5px wide.
</div>
</body>
</html>
Key Points
- The
border-top-styleproperty only affects the top border of an element - You must set
border-widthfor the border style to be visible - The default value is
none, which means no border is displayed - 3D styles (groove, ridge, inset, outset) require sufficient border width to be noticeable
Conclusion
The border-top-style property provides flexible styling options for the top border of elements. Combine it with border-top-width and border-top-color for complete border customization.
Updated on: 2026-03-15T23:18:59+05:30
170 Views
Advertisements