CSS border-style Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 23 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-style property in CSS is used to define the style of the border around an element. It controls the appearance of the border, allowing you to choose from a variety of predefined styles, such as solid, dashed, dotted, and more.

This property is essential for adding visual structure and emphasis to elements on your web page.

💡 Syntax

The syntax for the border-style property allows you to specify one or more styles for the border sides.

Syntax

Copied

element {
  border-style: style;
}

You can define the style for all four sides of the border simultaneously, or specify them individually.

One value: Applies to all four sides (top, right, bottom, left).
Two values: The first value applies to the top and bottom, the second to the right and left.
Three values: The first value applies to the top, the second to the right and left, the third to the bottom.
Four values: Applies to the top, right, bottom, and left, respectively.

🎛️ Default Value

The default value of the border-style property is none, which means no border will be displayed.

🏠 Property Values

Value	Description
none	No border (invisible).
solid	A solid, single line border.
dotted	A border consisting of dots.
dashed	A border consisting of dashes.
double	Two solid lines.
groove	A 3D grooved border.
ridge	A 3D ridged border.
inset	A border that makes the element appear embedded.
outset	A border that makes the element appear raised.

📄 Example

In this example, we apply different border styles to three div elements.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-style Example</title>
  <style>
    .solid-border {
      border-style: solid;
      border-width: 2px;
      border-color: black;
    }
    .dashed-border {
      border-style: dashed;
      border-width: 2px;
      border-color: blue;
    }
    .dotted-border {
      border-style: dotted;
      border-width: 2px;
      border-color: red;
    }
  </style>
</head>
<body>
  <h1>Different Border Styles</h1>
  <div class="solid-border">Solid Border</div>
  <div class="dashed-border">Dashed Border</div>
  <div class="dotted-border">Dotted Border</div>
</body>
</html>

🖥️ Browser Compatibility

The border-style property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This ensures consistent rendering of borders across different user environments.

🎉 Conclusion

The border-style property is a fundamental tool for controlling the visual appearance of borders around elements. By selecting the appropriate border style, you can enhance the structure and aesthetics of your web page. Experiment with different styles to find the one that best suits your design needs.