CSS border-top-style: Set or Change the Style of the Top Border

The CSS border-top-style property is used when we need to style the top border of an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border: 8px dotted crimson; border-top-style: solid; padding: 12px;}
      p {border: 6px dashed lightcoral; border-top-style: solid; padding: 12px;}
   </style>
</head>
<body>

   <h2>The border-top-style Property</h2>
   <p>This is a para.</p>
   
</body>
</html>
Output

The border-top-style Property

This is a para.

The CSS style block in the preceding example contains two selectors: h2 and p. The "border-top-style" property is set to "solid" for both selectors, indicating that the top border of both elements will have a solid line style.

Furthermore, the h2 selector has a "border" property that sets the width, style, and color of the border to 8px dotted crimson. The p selector also has a "border" property, which sets the border width, style, and color to 6px dashed lightcoral. Both selectors have a "padding" property with a value of 12px applied to them.

The CSS property "border-top-style" allows you to specify the style of an element's top border. You can select from a variety of border styles, including solid, dashed, dotted, double, and groove. The value of "border-top-style" can be set independently of the other border properties, giving you more control over how the border looks.

The h2 and p elements in this example will both have a solid top border style in addition to their other border properties. This results in a unified design between the two elements while still allowing for individual customization. The "padding" property can also be used to add space between the text and the border, improving readability and visual appeal.

CSS border-top-style Syntax

The syntax of the border-top-style property in CSS is:

border-top-style: solid|dashed|dotted|double|ridge|groove|inset|outset|initial|inherit|none|hidden;

All the border style values are described in a separate post.

Advantages of the border-top-style property in CSS

Disadvantages of the border-top-style property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!