Article Categories

Selected Reading

Change the style of top border with CSS

Javascript Web Development Front End Scripts

The border-top-style property in CSS defines the line style of an element's top border. It accepts various values like solid, dashed, dotted, double, and more.

Syntax

border-top-style: value;

Common Values

Value	Description
`solid`	Single solid line
`dashed`	Dashed line
`dotted`	Dotted line
`double`	Two solid lines
`groove`	3D grooved effect
`ridge`	3D ridged effect
`none`	No border

Example

Here's how to apply different top border styles:

<html>
   <head>
      <style>
         .solid-border {
            border-width: 3px;
            border-top-style: solid;
            border-top-color: blue;
            padding: 10px;
            margin: 10px;
         }
         .dashed-border {
            border-width: 3px;
            border-top-style: dashed;
            border-top-color: red;
            padding: 10px;
            margin: 10px;
         }
         .dotted-border {
            border-width: 3px;
            border-top-style: dotted;
            border-top-color: green;
            padding: 10px;
            margin: 10px;
         }
         .double-border {
            border-width: 4px;
            border-top-style: double;
            border-top-color: purple;
            padding: 10px;
            margin: 10px;
         }
      </style>
   </head>
   <body>
      <p class="solid-border">Solid top border</p>
      <p class="dashed-border">Dashed top border</p>
      <p class="dotted-border">Dotted top border</p>
      <p class="double-border">Double top border</p>
   </body>
</html>

Using Inline Styles

You can also apply border styles directly using inline CSS:

<html>
   <body>
      <p style="border-width: 2px; border-top-style: solid; border-top-color: #333; padding: 8px;">
         Inline solid top border
      </p>
      <p style="border-width: 3px; border-top-style: groove; border-top-color: #666; padding: 8px;">
         Inline grooved top border
      </p>
   </body>
</html>

Key Points

The border-top-style property only defines the line style, not the width or color
Use border-top-width to set thickness and border-top-color to set color
The shorthand border-top can set width, style, and color in one declaration
Default value is none, which means no border is displayed

Conclusion

The border-top-style property provides flexible styling options for top borders. Combine it with width and color properties for complete border customization.

karthikeya Boyini

Updated on: 2026-03-15T23:18:59+05:30

178 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next