CSS border-width Property

Posted in CSS Tutorial

Updated on Aug 08, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-width property in CSS allows you to control the width of the borders around an element. Borders are an essential part of styling elements on a web page, and adjusting their width can significantly impact the visual layout. With the border-width property, you can set the width of the border on all four sides of an element or individually for each side.

💡 Syntax

The syntax for the border-width property is straightforward and can be applied to any element.

Syntax

Copied

element {
  border-width: value;
}

You can specify a single value for uniform borders or up to four values to set different widths for each side of the element.

🎛️ Default Value

The default value for the border-width property is medium, which usually translates to a browser-specific width, often around 2px.

🏠 Property Values

Value	Description
thin	A predefined thin border width, usually around 1px.
medium	A predefined medium border width, typically around 2px (default value).
thick	A predefined thick border width, usually around 4px.
length	A specific width value, such as px, em, rem, etc. For example, 5px or 0.5em.
initial	Sets the property to its default value.
inherit	Inherits the property value from its parent element.

📄 Example

In this example, we'll set the border width of an element to 5px.

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-width Example</title>
  <style>
    .box {
      border-style: solid;
      border-width: 5px;
      border-color: #ff5733;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Box with Custom Border Width</h1>
  <div class="box">
    This box has a 5px wide border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-width property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is one of the most basic CSS properties and can be reliably used in web development.

🎉 Conclusion

The border-width property is a fundamental tool for controlling the visual thickness of element borders on a web page.

Whether you need a thin line to subtly separate content or a thick border to make an element stand out, this property gives you the flexibility to achieve the desired effect. Experiment with different widths to see how they affect your design and create the perfect look for your website.