CSS border-top-style Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

border-top-style: dotted

CSS border-top-style Property

CSS border-top-style property sets the line style of an element's top border.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border-top-style: dotted; } </style> </head> <body> <h1>CSS border-top-style Property</h1> <div> This is div container. </div> </body> </html>

Run

Syntax

Using CSS

element{ border-top-style: dotted; }

Using Javascript

object.style.borderTopStyle="dotted"

Animatable

No, border-top-style property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS border-top-style property is none.

Property Value

The following table provides a list of all values for CSS border-top-style property.

Value	Explanation
none hidden dotted dashed solid double groove ridge inset outset	The list of all values which can be used with CSS `border-top-style` property.

All in One

In the following example, we will demonstrate all values of CSS border-top-style property.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 10px; margin-bottom: 10px; } #point2{ border-top-style: dotted; } #point3{ border-top-style: dashed; } </style> </head> <body> <h1>CSS border-top-style Property</h1> <h2>border-top-style: dotted;</h2> <div id="point2"> This is div container. </div> <h2>border-top-style: dashed;</h2> <div id="point3"> This is div container. </div> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS border-top-style property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 10px; margin-bottom: 10px; border-top-style: dotted; } </style> </head> <body> <h1>CSS border-top-style Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.borderTopStyle = "dashed"; } </script> </body> </html>

Run