CSS border-left Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-left property in CSS is used to set the style, width, and color of the left border of an element.

This property allows you to control the appearance of the left edge of an element, enabling you to create visual separation or emphasis on specific parts of your content. The border-left property is a shorthand for setting border-left-width, border-left-style, and border-left-color in one declaration.

💡 Syntax

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

Syntax

Copied

element {
  border-left: width style color;
}

width: Specifies the thickness of the border (e.g., 2px, 0.1em, thin).
style: Specifies the style of the border (e.g., solid, dashed, dotted).
color: Specifies the color of the border (e.g., #000, red, rgba(0, 0, 0, 0.5)).

🎛️ Default Value

The default value of the border-left property is:

Syntax

Copied

element{
  border-left: medium none currentcolor;
}

This means that, by default, the left border is not displayed (none), with a medium thickness and using the current text color if it were to be applied.

🏠 Property Values

width: The thickness of the border. This can be a specific measurement (e.g., 2px), a relative size (e.g., thin, medium, thick), or a percentage.
style: The style of the border. Common values include:
- none: No border.
- solid: A solid line.
- dotted: A series of dots.
- dashed: A series of dashes.
- double: Two solid lines.
- groove: A 3D grooved border.
- ridge: A 3D ridged border.
- inset: A 3D inset border.
- outset: A 3D outset border.
color: The color of the border, which can be any valid CSS color value.

📄 Example

In this example, we'll apply a solid, 5px thick, red border to the left side of a div element.

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 Example</title>
  <style>
    .box {
      border-left: 5px solid red;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Box with Left Border</h1>
  <div class="box">
    This box has a 5px solid red left border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-left property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a reliable property for styling elements' borders, ensuring consistent visual appearance across different platforms.

🎉 Conclusion

The border-left property in CSS provides a simple and effective way to style the left border of an element.

Whether you're looking to add a subtle touch or create a bold visual impact, this property offers the flexibility you need to achieve your design goals. Experiment with different values and see how this property can enhance your website's layout and design.