Article Categories

Selected Reading

Usage of border-style property in CSS

Javascript Web Development Front End Scripts

The border-style property in CSS defines the style of an element's border. It controls how the border appears visually, such as solid, dashed, dotted, or hidden.

Syntax

border-style: value;

Common Border Style Values

Value	Description
`none`	No border (default)
`solid`	Solid single line
`dashed`	Dashed line
`dotted`	Dotted line
`double`	Double solid lines
`groove`	3D grooved effect
`ridge`	3D ridged effect
`inset`	3D inset effect
`outset`	3D outset effect

Basic Example

<html>
<head>
    <style>
        .example {
            border-width: 3px;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p class="example" style="border-style: none;">
        This paragraph has no border (border-style: none).
    </p>
    
    <p class="example" style="border-style: solid;">
        This paragraph has a solid border.
    </p>
    
    <p class="example" style="border-style: dashed;">
        This paragraph has a dashed border.
    </p>
    
    <p class="example" style="border-style: dotted;">
        This paragraph has a dotted border.
    </p>
</body>
</html>

Multiple Border Styles

You can set different border styles for each side using shorthand values:

<html>
<head>
    <style>
        .multi-border {
            border-width: 4px;
            padding: 15px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <!-- Four values: top right bottom left -->
    <div class="multi-border" style="border-style: solid dashed dotted double;">
        Different border styles on each side: solid (top), dashed (right), dotted (bottom), double (left).
    </div>
    
    <!-- Two values: top/bottom right/left -->
    <div class="multi-border" style="border-style: solid dashed;">
        Solid borders on top/bottom, dashed on left/right.
    </div>
</body>
</html>

Individual Side Properties

You can also target individual sides using specific properties:

<html>
<head>
    <style>
        .individual-sides {
            border-width: 3px;
            border-top-style: solid;
            border-right-style: dashed;
            border-bottom-style: dotted;
            border-left-style: double;
            padding: 15px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="individual-sides">
        Each border side has a different style using individual properties.
    </div>
</body>
</html>

Key Points

border-style: none is the default value and hides the border completely
Border width and color must be set separately for the border to be visible
The border-style property is required for borders to display
3D effects (groove, ridge, inset, outset) work best with thicker borders

Conclusion

The border-style property is essential for creating visible borders in CSS. Use solid for simple borders, dashed or dotted for decorative effects, and combine with border-width and border-color for complete border control.

karthikeya Boyini

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

86 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next