rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Border-Image-Width Customize Border Image Size

Learn how to use CSS border-image-width to customize the size of border images.

Discover available options, including lengths, percentages, numbers, and the auto keyword.

Introduction

The border-image-width CSS property sets the width of an element’s border image, providing full control over the appearance of your web pages. This property is widely supported across different browsers and devices, making it a reliable choice for creating visually appealing and responsive designs.

Baseline Widely Available

Introduced in February 2017, the border-image-width property has become a standard tool in web development, ensuring consistent and polished designs across various platforms.

Description

The border-image-width property in CSS is used to define the width of an element’s border image. This property allows for customization of the border image width for the top, right, bottom, and left sides, enhancing the overall design of your web pages.

Syntax

/* Keyword value */
border-image-width: auto;

/* <length> value */
border-image-width: 1rem;

/* <percentage> value */
border-image-width: 25%;

/* <number> value */
border-image-width: 3;

/* top and bottom | left and right */
border-image-width: 2em 3em;

/* top | left and right | bottom */
border-image-width: 5% 15% 10%;

/* top | right | bottom | left */
border-image-width: 5% 2em 10% auto;

/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

Explanation of Syntax

One Value: Applies the same width to all four sides.
Two Values: The first value applies to the top and bottom, while the second value applies to the left and right sides.
Three Values: The first value applies to the top, the second to the left and right, and the third to the bottom.
Four Values: The values apply to the top, right, bottom, and left sides in that order (clockwise).

Values

Length (`<length>`)

Specifies the width of the border image using standard CSS length units such as pixels (px), ems (em), or any other valid CSS length unit.

Example:

border-image-width: 1rem;

Percentage (`<percentage>`)

Sets the width of the border image as a percentage relative to the width or height of the border image area.

Example:

border-image-width: 25%;

Number (`<number>`)

Specifies the width of the border image as a multiple of the corresponding border-width.

Example:

border-image-width: 3;

Auto (`auto`)

Sets the width of the border image to the intrinsic width or height of the corresponding border-image-slice. If the image does not have the required intrinsic dimension, the corresponding border-width is used instead.

Example:

border-image-width: auto;

Global Values

initial: Sets the property to its default value.
inherit: Inherits the value from the parent element.
revert: Resets the property to the user agent’s default.
revert-layer: Resets the property to the value defined by the user agent for the active layer.
unset: Resets the property to its natural value, which effectively means it behaves as though the property is not set.

Example:

border-image-width: inherit;

Formal Definition

Formal Syntax

border-image-width = [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

<length-percentage> = <length> | <percentage>

Examples

Example 1: Basic Usage

<!DOCTYPE html>
<html>
<head>
    <title>Basic border-image-width Example</title>
    <style>
        .border-image {
            border: 25px solid transparent;
            padding: 15px;
            border-image: url('( WebsiteUrl )') 30 round;
            border-image-width: 25px;
        }
    </style>
</head>
<body>
    <div class="border-image">
        An element with a basic border-image-width setting
    </div>
</body>
</html>

Example 2: Using Different Widths for Each Side

<!DOCTYPE html>
<html>
<head>
    <title>Custom border-image-width Example</title>
    <style>
        .border-image {
            border: 25px solid transparent;
            padding: 15px;
            border-image: url('( WebsiteUrl )') 30 round;
            border-image-width: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div class="border-image">
        An element with custom border-image-width settings
    </div>
</body>
</html>

Example 3: Using Percentages

<!DOCTYPE html>
<html>
<head>
    <title>Percentage border-image-width Example</title>
    <style>
        .border-image {
            border: 25px solid transparent;
            padding: 15px;
            border-image: url('( WebsiteUrl )') 30 round;
            border-image-width: 10% 20% 30% 40%;
        }
    </style>
</head>
<body>
    <div class="border-image">
        An element with percentage border-image-width settings
    </div>
</body>
</html>

Example 4: Using the `auto` Keyword

<!DOCTYPE html>
<html>
<head>
    <title>Auto border-image-width Example</title>
    <style>
        .border-image {
            border: 25px solid transparent;
            padding: 15px;
            border-image: url('( WebsiteUrl )') 30 round;
            border-image-width: auto;
        }
    </style>
</head>
<body>
    <div class="border-image">
        An element with auto border-image-width setting
    </div>
</body>
</html>

Tiling a Border Image

Using border-image-width lets you control the repetition and placement of an image around an element’s border.

Example: Tiling a Border Image

<!DOCTYPE html>
<html>
<head>
    <title>Tiling a Border Image Example</title>
    <style>
        .border-image {
            border: 20px solid transparent;
            padding: 40px;
            border-image: url('( WebsiteUrl )') 30 round;
            border-image-width: 16px;
        }
    </style>
</head>
<body>
    <div class="border-image">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</body>
</html>

Image Explanation:

The image used (( WebsiteUrl )) is a 90 by 90 pixels image containing eight circles. Each circle is 30 by 30 pixels.
border-image-slice: 30 specifies that each slice of the border image is 30 pixels.

Result:

The border image will be tiled around the element with a width of 16 pixels, creating a repeating pattern.

Specifications

The border-image-width property is defined in the CSS Backgrounds and Borders Module Level 3 specification.

CSS Backgrounds and Borders Module Level 3

Specification: CSS Backgrounds and Borders Module Level 3

Browser Compatibility

Google Chrome: Version 15.0 and later
Microsoft Edge: Version 12.0 and later
Internet Explorer: Version 11.0 and later
Mozilla Firefox: Version 13.0 and later
Opera: Version 15.0 and later
Apple Safari: Version 6.0 and later

For the most up-to-date information, refer to the MDN Web Docs Browser Compatibility Table.

FAQs

What is the `border-image-width` property in CSS?

The border-image-width property sets the width of the image used in the border. It controls how much space the image occupies around the element, allowing for custom border thickness.

How does `border-image-width` differ from `border-width`?

border-width controls the thickness of traditional borders, while border-image-width defines the space occupied by an image used as a border. They can work together to fine-tune designs.

Can I use different widths for each side of the border?

Yes, you can specify different widths for each side using a space-separated list. For example: border-image-width: 10px 15px 20px 5px; sets different widths for the top, right, bottom, and left sides, respectively.

What units can be used with `border-image-width`?

You can use absolute units like pixels (px), relative units like em or rem, percentages, or even unitless values that act as multipliers of the border image slice. This gives you flexibility in controlling the border’s appearance.

How does `border-image-width` affect responsive designs?

Using percentage values or relative units like em for border-image-width ensures that the border scales smoothly on different screen sizes, making it a better choice for responsive designs.

Responsive Designs with `border-image-width`

Creating responsive designs with the border-image-width property ensures that your border images scale smoothly across different screen sizes. By using percentage values or relative units like em or rem, you can make sure that the border image adjusts dynamically to fit the size of the element.

Example: Responsive Border Image

<!DOCTYPE html>
<html>
<head>
    <title>Responsive border-image-width Example</title>
    <style>
        .border-image {
            border: 25px solid transparent;
            padding: 15px;
            border-image: url('( WebsiteUrl )') 30 round;
            border-image-width: 10% 20% 10% 20%;
        }
    </style>
</head>
<body>
    <div class="border-image">
        An element with a responsive border-image-width setting
    </div>
</body>
</html>

Explanation:

border-image-width: 10% 20% 10% 20% defines the widths for the top, right, bottom, and left sides as percentages of the border image area.
This makes the border image responsive to different screen sizes.

Benefits of Responsive Border Images

Consistency Across Devices: Percentage values ensure the border image maintains its proportions on any screen size, providing a consistent look.
Improved User Experience: Responsive designs adapt to the user’s device, making the website more user-friendly.
Enhanced Aesthetics: Smooth scaling of the border image maintains the visual appeal without compromising functionality.

Additional Tips for Responsive Designs

Media Queries: Use media queries to adjust the border-image-width property based on different screen sizes. This allows fine-tuning for various devices.
Flexible Units: Combine percentage values with relative units like em or rem for highly adaptable designs that respond to both screen size and content.
Testing: Regularly test designs on different devices and screen sizes to ensure the border image scales correctly and looks good.

Implementing these strategies helps create responsive designs that look great and provide a seamless user experience across all devices. The border-image-width property is a powerful tool for achieving this, offering the flexibility and control needed for visually stunning and functional web designs.

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-border-image-repeat.png

CSS Border-Image-Repeat Customizing Border Images CSS border-image-repeat allows customization of border images. Use options like stretch, repeat, round, and space to create unique designs. Enhance visuals with ease.

css_property_cover/css-property-border-image-outset.png

CSS border-image-outset Enhance Border Design The CSS border-image-outset property allows you to extend border images beyond an element's border box. Use it to create visually appealing designs with length, number, and global values.

css_property_cover/css-property-border-image-slice.png

Mastering CSS border-image-slice for Custom Borders Discover the power of CSS border-image-slice to create custom, visually appealing borders. Learn about its use cases and available options for slicing images.

css_property_cover/css-property-background-size.png

CSS Background-Size Control Image Scaling Learn how to use the CSS background-size property to control the scaling of background images. Discover options like cover, contain, and custom dimensions. Enhance your web design with responsive background images.

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-border-top-right-radius.png

CSS Border-Top-Right-Radius Round Corners Easily Learn how to use the CSS border-top-right-radius property to round the top-right corner of elements. Options include length and percentage values for circular or elliptical corners.

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

CSS Border-Image-Width Customize Border Image Size

Introduction

Baseline Widely Available

Description

Syntax

Explanation of Syntax

Values

Length (<length>)

Percentage (<percentage>)

Number (<number>)

Auto (auto)

Global Values

Formal Definition

Formal Syntax

Examples

Example 1: Basic Usage

Example 2: Using Different Widths for Each Side

Example 3: Using Percentages

Example 4: Using the auto Keyword

Tiling a Border Image

Example: Tiling a Border Image

Specifications

CSS Backgrounds and Borders Module Level 3

Browser Compatibility

FAQs

What is the border-image-width property in CSS?

How does border-image-width differ from border-width?

Can I use different widths for each side of the border?

What units can be used with border-image-width?

How does border-image-width affect responsive designs?

Responsive Designs with border-image-width

Example: Responsive Border Image

Benefits of Responsive Border Images

Additional Tips for Responsive Designs

Talk with CEO

Length (`<length>`)

Percentage (`<percentage>`)

Number (`<number>`)

Auto (`auto`)

Example 4: Using the `auto` Keyword

What is the `border-image-width` property in CSS?

How does `border-image-width` differ from `border-width`?

What units can be used with `border-image-width`?

How does `border-image-width` affect responsive designs?

Responsive Designs with `border-image-width`