![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-width Property
![CSS border-width Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-width.webp)
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.
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-width Property), please comment here. I will help you immediately.