CSS Properties: How to slice the image specified by border-image-source?

Last update on February 17 2024 12:46:14 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to slice the image specified by border-image-source</title><!-- Title of the HTML document -->
<style type="text/css">/* CSS style start*/
div {
border: 15px solid transparent; /* Sets a transparent solid border with 15px width for <div> elements */
padding: 15px; /* Sets 15px padding for <div> elements */
border-image: url(https://www.w3resource.com/w3r_images/border.png) round; /* Specifies the border image source and sets it to be rounded */
border-image-slice: 50; /* Slices the border image into sections of 50px */
}
div {
border: 15px solid transparent; /* Sets a transparent solid border with 15px width for <div> elements */
padding: 15px; /* Sets 15px padding for <div> elements */
border-image: url(https://www.w3resource.com/w3r_images/border.png) round; /* Specifies the border image source and sets it to be rounded */
border-image-slice: 20%; /* Slices the border image into sections of 20% of the image size */
}
div {
border: 15px solid transparent; /* Sets a transparent solid border with 15px width for <div> elements */
padding: 15px; /* Sets 15px padding for <div> elements */
border-image: url(https://www.w3resource.com/w3r_images/border.png) round; /* Specifies the border image source and sets it to be rounded */
border-image-slice: 30%; /* Slices the border image into sections of 30% of the image size */
}
</style>
</head>
<body>
<div>border-image-slice: 50;</div><!-- Demonstrates border image slicing into sections of 50 pixels -->
<div>border-image-slice: 20%;</div><!-- Demonstrates border image slicing into sections of 20% of the image size -->
<div>border-image-slice: 30%;</div><!-- Demonstrates border image slicing into sections of 30% of the image size -->
</body>
</html>

Explanation:

This HTML document demonstrates different ways to slice the image specified by border-image-source.
Three <div> elements are styled with different values for border-image-slice.
border: 15px solid transparent; sets a transparent solid border with a width of 15 pixels for all <div> elements.
padding: 15px; adds 15 pixels of padding to all <div> elements.
border-image: url(https://www.w3resource.com/w3r_images/border.png) round; specifies the border image source and sets it to be rounded.
border-image-slice: 50; slices the border image into sections of 50 pixels for the first <div>.
border-image-slice: 20%; slices the border image into sections of 20% of the image size for the second <div>.
border-image-slice: 30%; slices the border image into sections of 30% of the image size for the third <div>.

Live Demo:

See the Pen border-image-slice-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page