rick@tillitsdone.com

+66824564755

Scroll to discover

Mastering CSS border-width A Comprehensive Guide

Discover the CSS border-width property, its use cases, and available options.

Learn how to set border widths for different sides of an element and enhance your web design.

Formal Definition

The border-width property in CSS is a shorthand that sets the width of an element’s border. It combines the values of border-top-width, border-right-width, border-bottom-width, and border-left-width.

Initial Value:

medium for all sides.

Applies To:

All elements, including the ::first-letter pseudo-element.

Inherited:

No, the border-width property is not inherited.

Computed Value:

The absolute length or 0 if the border style is none or hidden.

Animation Type:

The border-width property is animatable. Each constituent property is animated as a length value.

Syntax:

border-width = <line-width>{1,4}

<line-width> = <length> | thin | medium | thick

Explanation:

<line-width>: Defines the border width as a nonnegative length or a keyword (thin, medium, thick). The exact thickness is implementation-specific.

Examples

Example: Applying Different Values

This example covers using single, double, triple, and quadruple values to set the border width for various sides of the element.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>border-width Property Examples</title>
    <style>
        div {
            margin-bottom: 20px;
            border-style: solid;
            border-color: blue;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">Website</h1>

    <!-- Single Value -->
    <p>border-width: 5px</p>
    <div style="border-width: 5px;">
        This div has a 5px border on all sides.
    </div>

    <!-- Two Values -->
    <p>border-width: 5px 10px</p>
    <div style="border-width: 5px 10px;">
        This div has a 5px border for the top/bottom and 10px for the left/right.
    </div>

    <!-- Three Values -->
    <p>border-width: 1px 2em 1.5cm</p>
    <div style="border-width: 1px 2em 1.5cm;">
        This div has a 1px border for the top, 2em for the left/right, and 1.5cm for the bottom.
    </div>

    <!-- Four Values -->
    <p>border-width: 1px 2em 0 4rem</p>
    <div style="border-width: 1px 2em 0 4rem;">
        This div has a 1px border for the top, 2em for the right, 0 for the bottom, and 4rem for the left.
    </div>
</body>
</html>

Explanation:

Single Value: border-width: 5px; sets a 5px border for all sides.
Two Values: border-width: 5px 10px; sets a 5px border for the top/bottom and 10px for the left/right.
Three Values: border-width: 1px 2em 1.5cm; sets a 1px border for the top, 2em for the left/right, and 1.5cm for the bottom.
Four Values: border-width: 1px 2em 0 4rem; sets a 1px border for the top, 2em for the right, 0 for the bottom, and 4rem for the left.

Example: Three Values for Border Width

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Border Width Property - Three Values</title>
    <style>
        div {
            margin-bottom: 10px;
            border-style: solid;
            border-color: blue;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">Website</h1>
    <p>border-width: 5px 10px 15px</p>
    <div style="border-width: 5px 10px 15px;">
        This div has a border of 5px for the top, 10px for the right/left, and 15px for the bottom.
    </div>
</body>
</html>

Example: Four Values for Each Side

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Border Width Property - Four Values</title>
    <style>
        div {
            margin-bottom: 10px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">Website</h1>
    <p>border-width: 5px 10px 15px 20px</p>
    <div style="border-width: 5px 10px 15px 20px;">
        This div has a border of 5px for the top, 10px for the right, 15px for the bottom, and 20px for the left.
    </div>
</body>
</html>

Browser Compatibility

The border-width property works well across all major web browsers, ensuring consistent display of your border styles. Here’s a quick look at browser compatibility:

Supported Browsers

Google Chrome: Full support since version 1.0 (December 2008).
Mozilla Firefox: Full support since version 1.0 (November 2004).
Microsoft Edge: Full support since its initial release (July 2015).
Internet Explorer: Full support since version 4.0 (September 1997).
Opera: Full support since version 3.5 (November 1998).
Safari: Full support since version 1.0 (June 2003).

Tips for Ensuring Compatibility

To make sure your web pages look great across different browsers, follow these tips:

Use Standard Units: Stick to units like pixels (px), ems (em), and rems (rem) for border widths.
Test Across Browsers: Regularly test your web pages on multiple browsers and devices.
Fallback Options: Use fallback options like initial or inherit to handle any unexpected behavior.

Additional Resources

For more information and related properties, you can explore the following resources:

Border-Related Shorthand Properties:
- border: A shorthand property that sets the width, style, and color of an element’s border.
- border-style: Defines the style of an element’s border.
- border-color: Sets the color of an element’s border.
Border Width-Related Properties:
- border-top-width: Specifies the width of the top border of an element.
- border-right-width: Defines the width of the right border of an element.
- border-bottom-width: Sets the width of the bottom border of an element.
- border-left-width: Specifies the width of the left border of an element.
Additional Resources:
- CSS Backgrounds and Borders Module Level 3: The official specification for the border-width property and related background and border properties.
- MDN Web Docs: A comprehensive resource for learning about CSS properties and best practices in web development.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-background-clip.png

CSS Background-Clip Enhance Your Web Design Discover the CSS background-clip property for stunning web designs. Control background extent using options like border-box, padding-box, content-box, and text.

css_property_cover/css-property-background-repeat.png

CSS Background-Repeat A Comprehensive Guide Discover how to use CSS background-repeat for web design. Control image repetition with options like repeat, no-repeat, space, and round.

css_property_cover/css-property-border-image.png

CSS Border-Image Enhance Design with Custom Borders Learn how to use the CSS border-image property to create visually appealing custom borders. Explore options like source, slice, width, outset, and repeat for unique designs.

css_property_cover/css-property-column-rule.png

CSS Column-Rule Customize Multi-Column Layouts CSS column-rule property enhances multi-column layouts by customizing the dividing lines. Options include width, style, and color for better visual separation.

css_property_cover/css-property-content.png

CSS Content Enhance Web Design with Dynamic Elements Learn how to use CSS content to enhance your web designs by adding dynamic elements such as text, images, counters, and quotes. Explore available options like normal, none, string, URI, and more.

css_property_cover/css-property-empty-cells.png

CSS Empty-Cells Enhance Table Design Learn how to use CSS empty-cells to control the appearance of empty table cells. Choose 'show' or 'hide' to create cleaner, more visually appealing tables.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms