Border image exercises

by sosegon

HTML

<!-- from https://www.smashingmagazine.com/2024/01/css-border-image-property/ -->
<div class='wrapper'>
  <div class='container'>
    <h2 class='title-divider-full-2'>
      Title divider full 2
    </h2>
  </div>
  <div class='container'>
    <h2 class='title-divider-full'>
      Title divider full
    </h2>
  </div>
  <div class='container'>
    <h2 class='title-divider'>
      Title divider
    </h2>
  </div>
  <div class='container'>
    <h2 class='title title-full-6'>
      Title full 6
    </h2>
  </div>
  <div class='container'>
    <h2 class='title title-full-5'>
      Title full 5
    </h2>
  </div>
  <div class='container'>
    <h2 class='title title-full-4'>
      Title full 4
    </h2>
  </div>
  <div class='container'>
    <h2 class='title title-full-3'>
      Title full 3
    </h2>
  </div>
  <div class='container'>
    <h2 class='title title-full-2'>
      Title full 2
    </h2>
  </div>
  <div class='container'>
    <h2 class='title title-full-1'>
      Title full 1
    </h2>
  </div>
  <div class='container'>
    <div class='elem super-width'>
      Text
    </div>
  </div>
  <div class='container'>
    <div class='elem image overlay'>
      Overlay
    </div>
    <div class='elem image overlay2'>
      Overlay2
    </div>
  </div>
  <div class='container'>
    <div class='elem border-good'>text</div>
    <div class='elem border-bad'>text</div>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}

.elem {
  width: 200px;
  height: 200px;
  display: inline-block;
  color: white;
}

.border-good {
  background-color: #123321;
  border: 5px solid red;
  border-image: linear-gradient(blue, red) 4/5px/0px 2px;
}

.border-bad {
  background-color: #321123;
  border-image: linear-gradient(blue, red) 1;
  border: 5px solid red;
  }
  
.image {
  background: url(https://source.unsplash.com/random/500x505) center/cover;
  display: grid;
  text-align: center;
  place-items: center;
}

.overlay {
  border-image: linear-gradient(#0003, #000) fill 0;
}

.overlay2 {
  border-image: linear-gradient(#1233, #000) 50%/50%;
}

.super-width {
  border: 5px solid pink;
  border-image: conic-gradient(blue 0 0) fill 0//0 0 0 100vw;
}

.title {
  padding: 10px 0;
}

.title-full-1 {
  border-image: linear-gradient(0deg, blue 8px, transparent 0) fill 0//0 100vw;
}

.title-full-2 {
  border-image: conic-gradient(pink 0 0) fill 0/calc(100% - 8px) 0 0 0/0 100vw;
}

.title-full-3 {
  border-image: conic-gradient(yellow 0 0) 0 0 1 0/0 0 8px 0/0 100vw;
}

.title-full-4 {
  border-image: conic-gradient(green 25%, cyan 50%, red 75%, brown 0) 1 0/8px 0/0 100vw;
}

.title-full-5 {
  border-image: conic-gradient(magenta 0 0) 0 1 0 0/calc(100% - 8px) 100% 0 0/0 100vw
}

.title-full-6 {
  border-image: conic-gradient(aqua 0 0) 0 0 0 1/calc(100% - 8px) 0 0 100%/0 100vw
}

.title-divider {
  border-image: linear-gradient(to bottom, transparent 45%, green 45% 55%, transparent 55%) 1 1 /0px 50px/0px 55px  
}

.title-divider-full {
  --bw: 2px;
  border-image: linear-gradient(to bottom, transparent calc(50% - var(--bw)/2), blue 0 calc(50% + var(--bw)/2), transparent 0) 0 1 /0px 100vw/0px calc(100vw + 5px)  
}

.title-divider-full-2 {
  --t: 2px; /* thickess */
  --w: 100vw; /* width */
  --g: 50px; /* gap */
  border-image:...