<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.