CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



border-style

The CSS border-style property is used to specify the style of the border of an element. It is one of the many CSS properties that can be used to enhance the appearance of a web page. The border-style property can be used to create different types of borders such as solid, dotted, dashed, double, groove, ridge, inset, and outset.

The border-style property can be applied to any HTML element that has a border. This includes elements such as divs, paragraphs, headings, tables, and images. The border-style property can be used in conjunction with other CSS properties such as border-width, border-color, and border-radius to create unique and visually appealing borders.

Syntax

The syntax for the border-style property is as follows:

selector {
  border-style: value;
}

The selector can be any valid CSS selector such as a class, ID, or element selector. The value can be one of the following:

  • none: No border is displayed.
  • hidden: Same as none, but the space where the border would be is still reserved.
  • dotted: A series of dots.
  • dashed: A series of short dashes.
  • solid: A single solid line.
  • double: Two parallel solid lines.
  • groove: A 3D groove effect.
  • ridge: A 3D ridge effect.
  • inset: A 3D inset effect.
  • outset: A 3D outset effect.
  • initial: Sets the border-style property to its default value.
  • inherit: Inherits the border-style property from its parent element.

Examples

Here are some examples of how the border-style property can be used:

Example 1: Solid Border

The following code creates a solid border around a div element:

<div style="border-style: solid;">
  This is a div with a solid border.
</div>
This is a div with a solid border.

Example 2: Dotted Border

The following code creates a dotted border around a paragraph element:

<p style="border-style: dotted;">
  This is a paragraph with a dotted border.
</p>

This is a paragraph with a dotted border.

Example 3: Double Border

The following code creates a double border around an image:

<img src="example.jpg" style="border-style: double;">

Example 4: Groove Border

The following code creates a groove border around a table:

<table style="border-style: groove;">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
Cell 1 Cell 2
Cell 3 Cell 4

Conclusion

The CSS border-style property is a versatile property that can be used to create a variety of border styles. By combining the border-style property with other CSS properties, web developers can create visually appealing borders that enhance the appearance of their web pages.

References

Activity