<p>I am an element withu ement with a CSS gradient border pattern. Th...</p>

<p class='round'>I am an element with a CSS gradient border pattern. Thisd a ...</p>

<p class='round'>I am an element with a CSS gradient border pattern. This is md ....</p>

<p>I am an element with a CSS gradient border pattern. This is made possibkgro...</p>
$bw: 1.5em;
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

p {
  /* essential styles */
  border: solid $bw transparent;
  background: linear-gradient(90deg, #fff, #aaa) padding-box, 
    var(--bd);
    
  /* just to prettify the while thing */
  box-sizing: border-box;
  position: relative;
  margin: 1em auto;
  padding: .5em;
  width: 98%; 
  max-width: 800px;
  font: 600 1.25em segoe script, comic sans ms, cursive;
  
  &:nth-child(1) {
    $c0: #c7c7c7;
    $c1: #da1b60;
    --r: 20%;
    --setup: 0/ #{$bw $bw} border-box;
    --bd:
      radial-gradient(circle at 71% 86%, 
          #{$c0} var(--r), 
          #{rgba($c0, 0)} calc(var(--r) + 1px)) 
        var(--setup),
      radial-gradient(circle at 29% 86%, 
          #{$c0} var(--r), 
          #{rgba($c0, 0)} calc(var(--r) + 1px)) 
        var(--setup),
      radial-gradient(circle at 35% 43%, 
          #{$c1} var(--r), 
          #{rgba($c1, 0)} calc(var(--r) + 1px)) 
        var(--setup),
      radial-gradient(circle at 65% 43%, 
          #{$c1} var(--r), 
          #{rgba($c1, 0)} calc(var(--r) + 1px)) 
        var(--setup),
      radial-gradient(circle at 50% 70%, 
          #{$c1} var(--r), 
          #{rgba($c1, 0)} calc(var(--r) + 1px)) 
        var(--setup) #{$c0};
    background-repeat: space;
  }
  
  &:nth-child(2) {
    --bd: 
      linear-gradient(90deg, #{rgba(#fff,.07)} 50%, transparent 0) 
        0/ 13px round border-box,
      linear-gradient(90deg, #{rgba(#fff,.13)} 50%, transparent 0)
        0/ 29px space border-box,
      linear-gradient(90deg, transparent 50%, #{rgba(#fff,.17)} 0) 
        0/ 37px round border-box,
      linear-gradient(90deg, transparent 50%, #{rgba(#fff,.19)} 0) 
        0/53px space border-box, 
      linear-gradient(#ff8a00, #da1b60) border-box;
  }
  
  &:nth-child(3) {
    $c1: #ff8a00;
    $c0: #da1b60;
    --setup: 0/ #{$bw $bw} border-box;
    --bd: 
      linear-gradient(45deg, 
          #{$c1} 12.5%, transparent 0, 
          transparent 87.5%, #{$c1} 0) 
        var(--setup),
      linear-gradient(135deg, 
          transparent 36.666%, #{$c0} 0, 
          #{$c0} 63.333%, transparent 0) 
        var(--setup),
      linear-gradient(45deg, 
          transparent 36.666%, #{$c1} 0, 
          #{$c1} 63.333%, transparent 0) 
        var(--setup);
    background-repeat: round
  }
  
  &:nth-child(4) {
    $c0: #262626;
    $c1: #ff9a00;
    --setup: #{$bw $bw} border-box;
    --bd: 
      linear-gradient(324deg, #{$c0} 9.5%, transparent 0) 
        #{-1.43*$bw} #{.8*$bw}/ var(--setup),
      linear-gradient( 36deg, #{$c0} 9.5%, transparent 0) 
        #{.53*$bw} #{.8*$bw}/ var(--setup),
      linear-gradient( 72deg, #{$c1} 17%, transparent 0) 
      #{.53*$bw} #{.77*$bw}/ var(--setup),
      linear-gradient(288deg, #{$c1} 17%, transparent 0) 
      #{-1.43*$bw} #{.77*$bw}/ var(--setup),
      linear-gradient(216deg, #{$c1} 15%, transparent 0) 
        #{-1.43*$bw} #{.43*$bw}/ var(--setup),
      linear-gradient(144deg, #{$c1} 15%, transparent 0) 
        #{.53*$bw} #{.43*$bw}/ var(--setup) #{$c0};
    background-repeat: round
  }
}

.round {
  padding: .75em 1.25em;
  border-radius: 5em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.