CSS Properties: How to percentages are relative to the height or width of the image?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to percentages are relative to the height or width of the image</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: 10px; /* Sets 10px padding for <div> elements */
  border-image: url(https://www.w3resource.com/w3r_images/border.png); /* Specifies the border image source */
  border-image-slice: 20%; /* Slices the border image into sections that are 20% of the image's height or width */
  border-image-repeat: round; /* Sets the border image to be repeated and rounded */
}
</style>
</head>
<body>
<div>border-image-slice: percentage</div><!-- Demonstrates border image slicing using a percentage -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use percentages as values for the border-image-slice property.
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: 10px; adds 10 pixels of padding to the <div> element.
border-image-slice: 20%; slices the border image into sections that are 20% of the image's height or width.
border-image-repeat: round; sets the border image to be repeated and rounded.
The text "border-image-slice: percentage" inside the <div> demonstrates border image slicing using a percentage value.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page