CSSのborder-image-widthで画像を使用した枠線の幅を調整し、デザインをカスタマイズする方法をわかりやすく解説

.css-sample-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      height: 200px;
      background-color: #f9f9f9;
      padding: 20px;
      margin: 20px auto;
      text-align: center;
    }

    .css-sample-item {
      width: 200px;
      padding: 10px;
      background-color: #cce7ff;
    }
  

<div class="css-sample-container css-sample-border-width-10">
      <div class="css-sample-item">Width 10px</div>
    </div>
  

.css-sample-border-width-10 {
      border: 10px solid transparent;
      border-image: url("https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg") 30 stretch;
      border-image-width: 10px;
    }
  

<div class="css-sample-container css-sample-border-width-20">
      <div class="css-sample-item">Width 20px</div>
    </div>
  

.css-sample-border-width-20 {
      border: 10px solid transparent;
      border-image: url("https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg") 30 stretch;
      border-image-width: 20px;
    }
  

<div class="css-sample-container css-sample-border-width-50">
      <div class="css-sample-item">Width 50px</div>
    </div>
  

.css-sample-border-width-50 {
      border: 10px solid transparent;
      border-image: url("https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg") 30 stretch;
      border-image-width: 50px;
    }