CSS border-left-width Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 30 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-left-width property in CSS is used to define the width of the left border of an element.

This property allows you to control how thick or thin the left border should be, and it can be set using various units of measurement. It plays a crucial role in creating visually balanced layouts by adjusting the borders around elements.

💡 Syntax

The syntax for the border-left-width property is simple. It can be applied to any element, and you can specify the width using different units.

Syntax

Copied

element {
  border-left-width: value;
}

Here, value can be a length unit (like pixels, ems, rems), a percentage, or one of the predefined keywords.

🎛️ Default Value

The default value of the border-left-width property is medium, which usually corresponds to 3-4 pixels, depending on the browser's default styling.

🏠 Property Values

Value	Description
thin	Sets the border width to a thin width, usually 1-2 pixels.
medium	Sets the border width to a medium width, typically around 3-4 pixels (default).
thick	Sets the border width to a thick width, usually 5-6 pixels.
length	Specifies the exact width of the border using length units like px, em, rem, pt, etc. For example, 10px or 0.5em.
inherit	Inherits the border width from the parent element.

📄 Example

In this example, we'll set the left border width of a div element to 10px.

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-left-width Example</title>
  <style>
    div {
      border-left-width: 10px;
      border-left-style: solid;
      border-left-color: black;
    }
  </style>
</head>
<body>
  <h1>Left Border Width Example</h1>
  <div>This div has a 10px wide left border.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-left-width property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. Since this property has been part of CSS for a long time, it works consistently across different platforms and devices.

🎉 Conclusion

The border-left-width property is a versatile tool for controlling the thickness of the left border of an element.

Whether you're aiming for a subtle border or a bold visual divider, this property gives you the flexibility to achieve the desired effect. Experiment with different widths to see how they impact the overall design of your web pages.