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

Last update on August 19 2022 21:50:51 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>How to slice the image specified by border-image-source</title>
<style type="text/css">
div {
border: 15px solid transparent;
padding: 15px;
border-image: url(https://www.w3resource.com/w3r_images/border.png) round;
border-image-slice: 50;
}
div {
border: 15px solid transparent;
padding: 15px;
border-image: url(https://www.w3resource.com/w3r_images/border.png) round;
border-image-slice: 20%;
}
div {
border: 15px solid transparent;
padding: 15px;
border-image: url(https://www.w3resource.com/w3r_images/border.png) round;
border-image-slice: 30%;
}
</style>
</head>
<body>
<div>border-image-slice: 50;</div>
<div>border-image-slice: 20%;</div>
<div>border-image-slice: 30%;</div>
</body>
</html>

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