Copyright © tutorialspoint.com

# CSS - border-style

## Description:

The border-style property allows you to select one of the following styles of border:

- none: No border. (Equivalent of border-width:0;)

- 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.

You can individually change the style of the bottom, left, top, and right borders of an element using following properties:

- border-bottom-style changes the style of bottom border.

- border-top-style changes the style of top border.

- border-left-style changes the style of left border.

- border-right-style changes the style of right border.

## Possible Values:

Any of the values defined above.

## Applies to:

All the HTML elements.

## DOM Syntax:

object.style.borderStyle="Any of the values defined above";

## Example:

Following is the example to show all these border styles:

    <p style="border-width:4px; border-style:none;">
    This is a border with none width.
    </p>

    <p style="border-width:4px; border-style:solid;">
    This is a solid border.
    </p>
    <p style="border-width:4px; border-style:dashed;">
    This is a dahsed border.
    </p>
    <p style="border-width:4px; border-style:double;">
    This is a double border.
    </p>
    <p style="border-width:4px; border-style:groove;">

    This is a groove border.
    </p>
    <p style="border-width:4px; border-style:ridge">
    This is aridge  border.
    </p>
    <p style="border-width:4px; border-style:inset;">
    This is a inset border.
    </p>
    <p style="border-width:4px; border-style:outset;">
    This is a outset border.
    </p>

    <p style="border-width:4px; border-style:hidden;">
    This is a hidden border.
    </p>
    <p style="border-width:4px;
                 border-top-style:solid;
                 border-bottom-style:dashed;
                 border-left-style:groove;
                 border-right-style:double;">
    This is a a border with four different styles.
    </p>

This will produce following result:

This is a border with none width. This is a solid border. This is a dahsed border. This is a double border. This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

This is a a border with four different styles.

To Become more comfortable - Do Online Practice

Copyright © tutorialspoint.com