Css Border Style

CSS border style

Created By: chatGPT

CSS provides several properties for styling borders of HTML elements, including border-style. This property defines the type of border to be displayed around an element. The options available for border-style include solid, dashed, dotted, double, groove, ridge, inset, and outset. If no border style is defined, the border will not be shown.

/* Example of border-style usage */

.box {
    border-width: 2px;
    border-color: #333;
    border-style: solid;
}

.dashed-box {
    border-width: 2px;
    border-color: #333;
    border-style: dashed;
}

.dotted-box {
    border-width: 2px;
    border-color: #333;
    border-style: dotted;
}

Here's how you can apply different border styles to various elements using CSS:

To set a solid border, you can create a class called .solid-box and define it as follows:

.solid-box {
    border: 2px solid #000;
}

For a dashed border, you can create a class called .dashed-box:

.dashed-box {
    border: 2px dashed #000;
}

If you want a dotted border, this is how you would define a class:

.dotted-box {
    border: 2px dotted #000;
}

You can also apply a double border which has two solid lines. Here’s how to create a class for that:

.double-box {
    border: 4px double #000;
}

Lastly, keep in mind that you can also combine properties for a more complex design. Here's an example of creating an element with multiple styles applied to its border:

.complex-box {
    border-width: 3px;
    border-color: #000;
    border-style: groove;
    padding: 10px;
}