<div></div>
<div></div>
<div></div>
<div></div>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	width: 100vw;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
	padding: 10px;
	grid-gap: 10px;
}
$bw: 1.5em;

div {
	min-height: 10vw;
	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;
}