Tillitsdone
down Scroll to discover
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.
thumbnail

Introduction

The border-image-slice CSS property is a great tool for web developers and designers. It lets you divide an image into parts to create custom borders for elements. This property is widely supported across browsers, ensuring compatibility with many devices and versions.

By defining the slicing of the image, you can create visually appealing borders that enhance the overall aesthetic of your web pages. The slicing process divides the image into nine distinct regions: four corners, four edges, and a middle region. You can specify the slicing using one to four values, each representing the position of the image slice.

This property is a key aspect of web design, allowing you to achieve unique and sophisticated border effects. By using border-image-slice, you can elevate your designs and make your websites stand out.

Specification

The border-image-slice property is part of the CSS Backgrounds and Borders Module Level 3 specification. This feature has been widely adopted by major browsers since February 2017. The specification outlines the behavior and usage of the border-image-slice property, ensuring consistency across different platforms and devices.

Understanding the specification helps you leverage the full potential of border-image-slice to create visually appealing and functional web designs.

Description

The border-image-slice CSS property is used to divide an image specified by the border-image-source property into distinct regions. These regions are then used to create the border of an element. This property is particularly useful for web designers who want to create custom, visually appealing borders using images.

When you apply border-image-slice, the image is divided into nine regions: four corners, four edges, and a middle region. These regions are defined by four slice lines, which are set at specific distances from their respective sides of the image. The slicing process allows for greater control over how the image is used to form the border of an element.

  • Corner Regions: These are the four regions at the corners of the image. Each corner region is used once to form the corresponding corner of the final border image.
  • Edge Regions: These are the four regions along the edges of the image. The edge regions can be repeated, scaled, or otherwise modified to match the dimensions of the element. They allow for flexibility in border design.
  • Middle Region: This is the central region of the image. By default, the middle region is discarded. However, if the fill keyword is used, the middle region is displayed like a background image, stacked above the actual background of the element.

The border-image-slice property can be specified using one to four <number-percentage> values. These values determine the position of each image slice:

  • One Value: When one value is specified, it creates all four slices at the same distance from their respective sides.
  • Two Values: The first value sets the slices measured from the top and bottom, while the second value sets the slices measured from the left and right.
  • Three Values: The first value sets a slice measured from the top, the second value sets slices measured from the left and right, and the third value sets a slice measured from the bottom.
  • Four Values: These values set slices measured from the top, right, bottom, and left in that order (clockwise).

Additionally, the fill keyword can be used to preserve the middle region of the image, allowing it to be displayed as a background image. This provides more flexibility in designing borders that integrate well with the overall design of the element.

The border-image-slice property is a powerful tool for web developers and designers, offering a high degree of customization and control over the appearance of borders. By using this property effectively, you can create unique and visually appealing web designs that stand out.

Syntax

The border-image-slice property is used to define how an image is sliced into regions for use in an element’s border. The syntax for this property is straightforward and flexible, allowing for various ways to specify the slicing of the image.

/* All sides */
border-image-slice: 30%;
/* Top and bottom | Left and right */
border-image-slice: 10% 30%;
/* Top | Left and right | Bottom */
border-image-slice: 30 30% 45;
/* Top | Right | Bottom | Left */
border-image-slice: 7 12 14 5;
/* Using the `fill` keyword */
border-image-slice: 10% fill;
border-image-slice: fill 10%;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
  • One Value: When a single value is provided, it applies to all four sides of the image, creating slices at the same distance from their respective sides.
  • Two Values: The first value sets the slices for the top and bottom, while the second value sets the slices for the left and right.
  • Three Values: The first value sets the slice for the top, the second value sets the slices for the left and right, and the third value sets the slice for the bottom.
  • Four Values: These values set slices for the top, right, bottom, and left sides in that order (clockwise).

The fill keyword can be placed anywhere in the declaration. It preserves the middle region of the image and displays it like a background image, stacked above the actual background.

Values

The border-image-slice property can take the following values:

  • <number>: Represents an edge offset in pixels for raster images and coordinates for vector images. For vector images, the number is relative to the element’s size, not the size of the source image, so percentages are generally preferable in these cases.
  • <percentage>: Represents an edge offset as a percentage of the source image’s size: the width of the image for horizontal offsets and the height for vertical offsets.
  • fill: Preserves the middle image region and displays it like a background image, but stacked above the actual background. Its width and height are sized to match the top and left image regions, respectively.

The border-image-slice property provides a high degree of flexibility and control, making it a valuable tool for web developers and designers looking to create custom and visually appealing borders in their web projects.

Values

The border-image-slice property in CSS can take several types of values to define how an image is sliced into regions for use in an element’s border. These values allow for precise control over the appearance and behavior of the border image. Here are the different types of values you can use:

<number>

  • Description: Represents an edge offset in pixels for raster images and coordinates for vector images.
  • Usage: For raster images, this value is measured in pixels. For vector images, it is typically measured in coordinates relative to the element’s size rather than the size of the source image.
  • Example: border-image-slice: 30px;

<percentage>

  • Description: Represents an edge offset as a percentage of the source image’s size.
  • Usage: The width of the image is used for horizontal offsets, and the height is used for vertical offsets.
  • Example: border-image-slice: 25%;

fill

  • Description: Preserves the middle image region and displays it like a background image, but stacked above the actual background.
  • Usage: The width and height of the middle region are sized to match the top and left image regions, respectively.
  • Example: border-image-slice: 10% fill;

Global Values

  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its default value.
  • revert: Resets the property to its initial value as defined by the user agent’s default stylesheet.
  • revert-layer: Resets the property to its initial value as defined by the user agent’s default stylesheet for the current cascade layer.
  • unset: Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.

Example Usage

/* Using a single percentage value */
border-image-slice: 30%;
/* Using two percentage values */
border-image-slice: 10% 20%;
/* Using three values */
border-image-slice: 30 30% 45;
/* Using four values */
border-image-slice: 7 12 14 5;
/* Using the `fill` keyword */
border-image-slice: 10% fill;
/* Using a global value */
border-image-slice: inherit;

Summary

  • <number>: Offsets in pixels or coordinates.
  • <percentage>: Offsets as a percentage of the image size.
  • fill: Preserves the middle region of the image.
  • Global Values: inherit, initial, revert, revert-layer, unset.

These values provide web developers with the flexibility to create highly customized and visually appealing borders for their web elements. By understanding and utilizing these values effectively, developers can enhance the overall aesthetic of their web designs.

Formal Definition

The border-image-slice property in CSS is formally defined within the CSS Backgrounds and Borders Module Level 3 specification. This property specifies how an image specified by border-image-source is sliced into regions that form the border image of an element.

Key Characteristics

  • Initial Value: 100%
  • Applies To: All elements, except internal table elements when border-collapse is collapse. It also applies to the ::first-letter pseudo-element.
  • Inherited: No
  • Percentages: Refer to the size of the border image
  • Computed Value: One to four percentages or absolute lengths, plus the keyword fill if specified
  • Animation Type: By computed value type

Formal Syntax

border-image-slice =
[<number [0,]> | <percentage [0,]>]{1,4} [&& fill[?]];

Explanation

  • Values: The property can be specified using one to four <number-percentage> values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to 100%.
  • Optional fill Keyword: The optional fill value, if used, can be placed anywhere in the declaration.
  • One Value: When one value is specified, it creates all four slices at the same distance from their respective sides.
  • Two Values: The first value creates slices measured from the top and bottom, and the second creates slices measured from the left and right.
  • Three Values: The first value creates a slice measured from the top, the second creates slices measured from the left and right, and the third creates a slice measured from the bottom.
  • Four Values: These create slices measured from the top, right, bottom, and left in that order (clockwise).

Summary

The border-image-slice property is a powerful tool for web developers and designers, providing a high degree of control over the appearance of border images. Understanding its formal definition and syntax allows developers to create customized and visually appealing borders that enhance the overall aesthetic of web designs. By using this property effectively, developers can achieve unique and sophisticated border effects that make their websites stand out.

Examples

To illustrate how the border-image-slice property works, let’s look at a few examples. These examples demonstrate different ways to slice an image for use as a border, showcasing the flexibility and power of this CSS property.

Example 1: Basic Usage

In this example, we’ll use a single value to slice the image equally from all sides.

HTML

<div class="border-example"></div>

CSS

.border-example {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image-source: url('https://example.com/image.png');
border-image-slice: 30%; /* Slices the image 30% from all sides */
border-image-repeat: round;
}

Example 2: Using Two Values

Here, we’ll use two values to set different slices for the top/bottom and left/right sides.

HTML

<div class="border-example"></div>

CSS

.border-example {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image-source: url('https://example.com/image.png');
border-image-slice: 10% 25%; /* 10% from top/bottom, 25% from left/right */
border-image-repeat: round;
}

Example 3: Using Four Values

In this example, we’ll specify four values to set slices for the top, right, bottom, and left sides individually.

HTML

<div class="border-example"></div>

CSS

.border-example {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image-source: url('https://example.com/image.png');
border-image-slice: 10% 20% 15% 25%; /* Top, right, bottom, left */
border-image-repeat: round;
}

Example 4: Using the fill Keyword

Here, we’ll use the fill keyword to preserve the middle region of the image and display it like a background image.

HTML

<div class="border-example"></div>

CSS

.border-example {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image-source: url('https://example.com/image.png');
border-image-slice: 10% fill; /* Slices the image 10% from all sides and fills the middle */
border-image-repeat: round;
}

Example 5: Interactive Adjustment

In this advanced example, we’ll create an interactive element where the user can adjust the border-image-slice and border-width values dynamically using sliders.

HTML

<div class="border-example"></div>
<div>
<label for="slice-value">Slice Value:</label>
<input type="range" id="slice-value" name="slice-value" min="0" max="100" value="30">
</div>
<div>
<label for="border-width">Border Width:</label>
<input type="range" id="border-width" name="border-width" min="0" max="50" value="30">
</div>

CSS

.border-example {
width: 300px;
height: 200px;
border-width: 30px;
border-style: solid;
border-image-source: url('https://example.com/image.png');
border-image-slice: 30%;
border-image-repeat: round;
}

JavaScript

document.getElementById('slice-value').addEventListener('input', function(event) {
const value = event.target.value;
document.querySelector('.border-example').style.borderImageSlice = value + '%';
});
document.getElementById('border-width').addEventListener('input', function(event) {
const value = event.target.value;
document.querySelector('.border-example').style.borderWidth = value + 'px';
});

In this example, users can adjust the slice value and border width using sliders, allowing them to see the changes in real-time. This demonstrates the interactive capabilities of the border-image-slice property.

Summary

These examples showcase the flexibility and power of the border-image-slice property. By using this property effectively, you can create unique and visually appealing borders that enhance the overall aesthetic of your web designs. Experiment with different values and combinations to achieve the desired effect for your projects.

Browser Compatibility

The border-image-slice property is widely supported across modern web browsers:

  • Google Chrome: Supported since version 15.0 (October 2011).
  • Mozilla Firefox: Supported since version 15.0 (August 2012).
  • Microsoft Edge: Supported since version 12 (October 2013).
  • Opera: Supported since version 15.0 (May 2013).
  • Safari: Supported since version 6.0 (July 2012).

Compatibility Table

BrowserVersionRelease Date
Google Chrome15.0October 2011
Mozilla Firefox15.0August 2012
Microsoft Edge12October 2013
Opera15.0May 2013
Safari6.0July 2012

Notes on Compatibility

  • Consistency: The border-image-slice property works well across these browsers, ensuring your border designs look the same.
  • Legacy Support: While older browsers may have limited support, modern browsers have supported this property since at least 2012.
  • Fallbacks: For older browsers, consider using fallback styles to maintain a consistent user experience.

Conclusion

The border-image-slice property is a great tool for web developers. It offers a lot of customization for border images and has good browser support. By using this property, you can create visually appealing web designs.

See Also

To learn more about the border-image-slice property, check out these resources:

These resources will help you master the border-image-slice property and create stunning web designs.

Get 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
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.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.