Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Css - Scale Border Image To The Border Width Or To A Specific Percentage

Post a Comment
I have the following code: which renders the following: On the case above it is using for the border, the image: [2] (resized version). Here you have the Codesandbox.io: https://

Solution 1:

Below is the solution:

Basically needed to change: 100 fill to 34.4 fill. Thanks @temani-afif!.

.container {
  width: 600px;
  height: 344px;
  background-color: rgb(255, 245, 187);
}

.frame {
  margin: 0px auto;
  width: 275.2px;
  height: 344px;
  background-image: url("https://i.ibb.co/wQSgvS7/jessica.jpg"), url("https://i.ibb.co/h7CCwc5/mcol-bottle-blue-bg.png");
  background-size: 172px 240.8px, auto;
  background-position: center center;
  background-repeat: no-repeat, repeat;
  /*
       * Available border images. The goal is to use image [1]:
       * - [1] https://i.ibb.co/6nW3dZC/fra-silver-cloud-wood-bg.png
       * - [2] https://i.ibb.co/YtVcXn2/fra-silver-cloud-wood-bg-resized.png
      */
  border-image: url("https://i.ibb.co/6nW3dZC/fra-silver-cloud-wood-bg.png") 100 fill / 34.4px / 0 repeat;
  border-width: 0;
  border-style: inset;
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scale border image to the border width</title>
</head>

<body>
  <div class="container">
    <div class="frame"></div>
  </div>
</body>

</html>

Post a Comment for "Css - Scale Border Image To The Border Width Or To A Specific Percentage"