CSS Properties: How to middle part of the image to be displayed?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to middle part of the image to be displayed</title><!-- Title of the HTML document -->
<style>
/* CSS styling */
div {
  border: 20px solid transparent; /* Sets a transparent solid border with 20px width for <div> elements */
  padding: 15px; /* Sets 15px padding for <div> elements */
  border-image: url(https://www.w3resource.com/w3r_images/border.png); /* Specifies the border image source */
  border-image-slice: 10% fill; /* Slices the border image into sections that are 10% of the image's width or height and fills the middle part */
  border-image-repeat: round; /* Sets the border image to be repeated and rounded */
}
</style>
</head>
<body>
<div>border-image-slice: fill</div><!-- Demonstrates border image slicing with the "fill" keyword -->
</body>
</html>

Explanation:

This HTML document demonstrates how to display the middle part of a border image using the "fill" keyword.
The >div> element is styled with a border image sourced from the specified URL.
border: 20px solid transparent; sets a transparent solid border with a width of 20 pixels for the >div> element.
padding: 15px; adds 15 pixels of padding to the >div> element.
border-image-slice: 10% fill; slices the border image into sections that are 10% of the image's width or height and fills the middle part.
border-image-repeat: round; sets the border image to be repeated and rounded.
The text "border-image-slice: fill" inside the >div> demonstrates border image slicing with the "fill" keyword.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page