Learn about its use cases and available options for slicing images.
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.
- 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 likeinherit
, otherwise it acts likeinitial
.
Example Usage
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
iscollapse
. 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
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 to100%
. - Optional
fill
Keyword: The optionalfill
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
CSS
Example 2: Using Two Values
Here, we’ll use two values to set different slices for the top/bottom and left/right sides.
HTML
CSS
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
CSS
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
CSS
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
CSS
JavaScript
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
Browser | Version | Release Date |
---|---|---|
Google Chrome | 15.0 | October 2011 |
Mozilla Firefox | 15.0 | August 2012 |
Microsoft Edge | 12 | October 2013 |
Opera | 15.0 | May 2013 |
Safari | 6.0 | July 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:
- CSS
border-image-repeat
Property: Control the repetition of border images. - CSS
border-image-width
Property: Set the width of the border image. - CSS
border-image-outset
Property: Define how far the border image extends. - CSS
border-image-source
Property: Specify the image source for border images. - Illustrated Description of the 1-to-4-Value Syntax: Visual explanation of the syntax.
- Border Images in CSS: A Key Focus Area for Interop 2023: Importance of border images for browser interoperability in 2023.
These resources will help you master the border-image-slice
property and create stunning web designs.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.