﻿/**FANCY FRAME BORDER**/

.channel-description-line {
  --b: .5em;
  /* border width */
  --c: 3em;
  /* corner size */
  --r: 2em;
  /* corner rounding */
  position: relative;
  margin: 1em auto;
  border: solid var(--b) transparent;
  padding: 1em;
  max-width: 23em;
  font: 1.25em ubuntu, sans-serif;
}
.channel-description-line::before {
  position: absolute;
  z-index: -1;
  inset: calc(-1*var(--b));
  border: inherit;
  border-radius: var(--r);
  background: linear-gradient(orange, deeppink, purple) border-box;
  --corner:
  	conic-gradient(from -90deg at var(--c) var(--c), red 25%, #0000 0)
  		0 0/ calc(100% - var(--c)) calc(100% - var(--c)) border-box;
  --inner: conic-gradient(red 0 0) padding-box;
  -webkit-mask: var(--corner), var(--inner);
  -webkit-mask-composite: source-out;
  mask: var(--corner) subtract, var(--inner);
  content: "";
}