Article Categories

Selected Reading

Set the style of the border with CSS

Javascript Web Development Front End Scripts

To set the style of border, use the border-style property. The border-style property allows you to select one of the following styles of the border:

none: No border
solid: Border is a single solid line.
dotted: Border is a series of dots.
dashed: Border is a series of short lines.
double: Border is two solid lines.
groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas.
hidden: Same as none, except in terms of border-conflict resolution for table elements.

Syntax

border-style: value;

Example

You can try to run the following code to set different styles of the border:

<html>
   <head>
      <title>Border Style Examples</title>
   </head>
   <body>
      <p style="border-width:4px; border-style:none; padding:10px;">
         This is a border with none style.
      </p>
      <p style="border-width:4px; border-style:solid; padding:10px;">
         This is a solid border.
      </p>
      <p style="border-width:4px; border-style:dashed; padding:10px;">
         This is a dashed border.
      </p>
      <p style="border-width:4px; border-style:dotted; padding:10px;">
         This is a dotted border.
      </p>
      <p style="border-width:4px; border-style:double; padding:10px;">
         This is a double border.
      </p>
      <p style="border-width:4px; border-style:groove; padding:10px;">
         This is a groove border.
      </p>
      <p style="border-width:4px; border-style:ridge; padding:10px;">
         This is a ridge border.
      </p>
      <p style="border-width:4px; border-style:inset; padding:10px;">
         This is an inset border.
      </p>
      <p style="border-width:4px; border-style:outset; padding:10px;">
         This is an outset border.
      </p>
   </body>
</html>

Multiple Border Styles

You can also set different styles for each side of the border:

<html>
   <head>
      <title>Multiple Border Styles</title>
   </head>
   <body>
      <div style="border-width:4px; border-style:solid dashed dotted double; padding:20px; margin:10px;">
         This div has different border styles: solid top, dashed right, dotted bottom, double left.
      </div>
      
      <div style="border-top-style:solid; border-right-style:dashed; border-bottom-style:dotted; border-left-style:double; border-width:4px; padding:20px; margin:10px;">
         Same result using individual border-style properties.
      </div>
   </body>
</html>

Key Points

The border-style property is required for borders to be visible
You can specify 1-4 values to set different styles for each side
The none and hidden values make borders invisible
3D effects (groove, ridge, inset, outset) depend on the border color

Conclusion

The border-style property is essential for creating visible borders in CSS. It offers various styles from simple solid lines to decorative 3D effects, giving you flexibility in web design.

Samual Sam

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

102 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next