CodePen Embed - Dashed radial/conic gradient border (HACKY, please don't use on an actual website, see description for more info)

- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.radial.rainbow(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
	p I'm a box with a dashed radial gradient border.
	input(type='range' value=x id='rx0')
	label(for='rx0') ox
	input(type='range' value=y id='ry0')
	label(for='ry0') oy
	input(type='checkbox' id='ro0')
	label(for='ro0') Show origin point
	input(type='checkbox' id='rov0')
	label(for='rov0') Show full gradient overlay

- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.radial.repeat(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
	p I'm a box with a dashed repeating radial gradient border.
	input(type='range' value=x id='rx1')
	label(for='rx1') ox
	input(type='range' value=y id='ry1')
	label(for='ry1') oy
	input(type='checkbox' id='ro1')
	label(for='ro1') Show origin point
	input(type='checkbox' id='rov1')
	label(for='rov1') Show full gradient overlay

- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.conic.rainbow(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
	p I'm a box with a dashed conic gradient border.
	input(type='range' value=x id='cx0')
	label(for='cx0') ox
	input(type='range' value=y id='cy0')
	label(for='cy0') oy
	input(type='checkbox' id='co0')
	label(for='co0') Show origin point
	input(type='checkbox' id='cov0')
	label(for='cov0') Show full gradient overlay

- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.conic.repeat(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
	p I'm a box with a dashed repeating conic gradient border.
	input(type='range' value=x id='cx1')
	label(for='cx1') ox
	input(type='range' value=y id='cy1')
	label(for='cy1') oy
	input(type='checkbox' id='co1')
	label(for='co1') Show origin point
	input(type='checkbox' id='cov1')
	label(for='cov1') Show full gradient overlay

View Compiled

@import 'compass/css3';

// saturation and lightness used for our rainbow gradient
$sat: 75%;
$lum: 65%;

$w: 21.5em; // element width
$h: .75*$w; // element height
$d: sqrt(pow($w, 2) + pow($h, 2)); // element diagonal
$bw: .625em; // border-width

$dl: 1.25em; // dash length
$dt: $bw; // dash thickness
$g: .5*$dl; // gap between dashes

// number of dashes (top to bottom and left to right)
$nv: floor(($h + $g)/($dl + $g));
$nh: floor(($w + $g)/($dl + $g));

// actual vertical and horizontal gaps
$gv: ($h - $nv*$dl)/($nv - 1);
$gh: ($w - $nh*$dl)/($nh - 1);

$stops-rep: #da1b60, #ff8a00 calc(1*var(--unit)), #ff8a00 calc(5*var(--unit)), #da1b60 calc(6*var(--unit)), #da1b60 calc(10*var(--unit));

$dot-r: .25em;

$box-d: 1em;
$c: var(--c-sel, var(--c-hl));
$ll: #555;
$hl: purple;

$thumb-d: 1em;
$thumb-r: .5*$thumb-d;
$track-h: .125em;
$track-r: .5*$track-h;
$track-w: .8*$w;
$input-h: $thumb-d;

// generate rainbow stop list
@function stops-rbw($prec: 6 /* precision */, $d0: 0) {
	$l: (); // stop list, initially empty
	$u: 360deg/$prec; // unit
	
	@for $i from $d0 through $prec {
		$c: HSL($i*$u, $sat, $lum);
		$l: $l, $c
	}
	
	@return $l
}

@mixin track() {
	width: $track-w + $thumb-d; height: $track-h;
	border-radius: .5*$track-h;
	background: radial-gradient(circle at calc(var(--pos) + #{$thumb-r}) 50%, 
				transparent $thumb-r, $ll 0);
}

@mixin thumb() {
	box-sizing: border-box;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	transform: scale(.7);
	background: $ll;
	transition: .3s;
}

@mixin thumb-focus() {
	transform: scale(1);
	background: $hl
}

* {
	margin: 0;
	padding: 0;
	font: inherit
}

body {
	display: flex;
	flex-wrap: wrap;
	background: url(https://images.unsplash.com/photo-1504441487953-4ddc9b5135ca?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover fixed #b7b7b7;
	background-blend-mode: overlay
}

div {
	/* essential styles */
	--vx: calc(var(--x)*#{.01*$w});
	--vy: calc(var(--y)*#{.01*$h});
	--vsetup: #{$bw $dl border-box no-repeat};
	--hsetup: #{$dl $bw border-box no-repeat};
	border: solid $bw transparent;
	background: 
		linear-gradient(rgba(#fff, .6), rgba(#ccc, .65)) 
			padding-box /* cover layer */, 
		var(--bd) /* gradient border layer */;
	
	/* just to prettify the while thing */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 1vmin auto;
	padding: .5em;
	min-width: $w;
	width: $w; height: $h;
	font: 600 1.25em segoe script, comic sans ms, cursive;
	
	&:before, &:after {
		position: absolute;
		pointer-events: none;
		content: ''
	}
	
	&:before {
		top: -$bw; right: -$bw; bottom: -$bw; left: -$bw;
		opacity: calc(.5*var(--ov));
	}
	
	&:after {
		top: calc(var(--vy) - #{$bw});
		left: calc(var(--vx) - #{$bw});
		margin: -$dot-r;
		padding: $dot-r;
		border-radius: 50%;
		opacity: var(--o);
		background: mediumvioletred;
	}
}

.rainbow { --slist: #{stops-rbw()} }

.repeat { --slist: #{$stops-rep} }

.radial {	
	--unit: 1px;
	
	&.rainbow {
		--d: #{$d};
		
		$glist: ();
	
		@for $i from 0 to $nv {
			$y: $i*($dl + $gv);

			$glist: $glist, 
				Radial-gradient(circle 
						at var(--vx) 
							 calc(var(--vy) - #{$y}), var(--slist) var(--d)) 
					0 $y/ var(--vsetup), 
				Radial-gradient(circle 
						at calc(var(--vx) + #{$dt - $w}) 
							 calc(var(--vy) - #{$y}), var(--slist) var(--d)) 
					100% $y/ var(--vsetup)
		}

		@for $i from 0 to $nh {
			$x: $i*($dl + $gh);

			$glist: $glist, 
				Radial-gradient(circle 
						at calc(var(--vx) - #{$x}) 
							 var(--vy), var(--slist) var(--d)) 
					$x 0/ var(--hsetup), 
				Radial-gradient(circle 
						at calc(var(--vx) - #{$x}) 
							 calc(var(--vy) + #{$dt - $h}), var(--slist) var(--d)) 
					$x 100%/ var(--hsetup)
		}
		
		--bd: #{$glist};
		
		&:before {
			background: Radial-gradient(circle at var(--vx) var(--vy), var(--slist) $d);
		}
	}
	
	&.repeat {
		$glist: ();
	
		@for $i from 0 to $nv {
			$y: $i*($dl + $gv);

			$glist: $glist, 
				Repeating-radial-gradient(circle 
						at var(--vx) 
							 calc(var(--vy) - #{$y}), var(--slist)) 
					0 $y/ var(--vsetup), 
				Repeating-radial-gradient(circle 
						at calc(var(--vx) + #{$dt - $w}) 
							 calc(var(--vy) - #{$y}), var(--slist)) 
					100% $y/ var(--vsetup)
		}

		@for $i from 0 to $nh {
			$x: $i*($dl + $gh);

			$glist: $glist, 
				Repeating-radial-gradient(circle 
						at calc(var(--vx) - #{$x}) 
							 var(--vy), var(--slist)) 
					$x 0/ var(--hsetup), 
				Repeating-radial-gradient(circle 
						at calc(var(--vx) - #{$x}) 
							 calc(var(--vy) + #{$dt - $h}), var(--slist)) 
					$x 100%/ var(--hsetup)
		}
		
		--bd: #{$glist};
		
		&:before {
			background: Repeating-radial-gradient(circle at var(--vx) var(--vy), $stops-rep);
		}
	}
}

.conic {
	display: none;
	
	@supports (background-image: conic-gradient(red, tan)) {
		--unit: 1%;
		display: flex;
		
		&.rainbow {
			$glist: ();
	
			@for $i from 0 to $nv {
				$y: $i*($dl + $gv);

				$glist: $glist, 
					conic-gradient(
							at var(--vx) 
								 calc(var(--vy) - #{$y}), var(--slist)) 
						0 $y/ var(--vsetup), 
					conic-gradient(
							at calc(var(--vx) + #{$dt - $w}) 
								 calc(var(--vy) - #{$y}), var(--slist)) 
						100% $y/ var(--vsetup)
			}

			@for $i from 0 to $nh {
				$x: $i*($dl + $gh);

				$glist: $glist, 
					conic-gradient(
							at calc(var(--vx) - #{$x}) 
								 var(--vy), var(--slist)) 
						$x 0/ var(--hsetup), 
					conic-gradient(
							at calc(var(--vx) - #{$x}) 
								 calc(var(--vy) + #{$dt - $h}), var(--slist)) 
						$x 100%/ var(--hsetup)
			}

			--bd: #{$glist};
			
			&:before {
				background: conic-gradient(at var(--vx) var(--vy), var(--slist));
			}
		}
		
		&.repeat {
			$glist: ();
	
			@for $i from 0 to $nv {
				$y: $i*($dl + $gv);

				$glist: $glist, 
					Repeating-conic-gradient(
							at var(--vx) 
								 calc(var(--vy) - #{$y}), var(--slist)) 
						0 $y/ var(--vsetup), 
					Repeating-conic-gradient(
							at calc(var(--vx) + #{$dt - $w}) 
								 calc(var(--vy) - #{$y}), var(--slist)) 
						100% $y/ var(--vsetup)
			}

			@for $i from 0 to $nh {
				$x: $i*($dl + $gh);

				$glist: $glist, 
					Repeating-conic-gradient(
							at calc(var(--vx) - #{$x}) 
								 var(--vy), var(--slist)) 
						$x 0/ var(--hsetup), 
					Repeating-conic-gradient(
							at calc(var(--vx) - #{$x}) 
								 calc(var(--vy) + #{$dt - $h}), var(--slist)) 
						$x 100%/ var(--hsetup)
			}

			--bd: #{$glist};
			
			&:before {
				background: repeating-conic-gradient(at var(--vx) var(--vy), $stops-rep);
			}
		}
	}
}

p, input, label { position: relative }

p { margin-bottom: .75em }

input {
	&[type='range'] {
		&::-webkit-slider-runnable-track, 
		&::-webkit-slider-thumb, & { -webkit-appearance: none }
		
		--pos: calc(var(--x)*#{.01*$track-w});
		display: block;
		margin: 0 auto;
		border: solid 0 transparent;
		padding: 0;
		width: $track-w + $thumb-d; height: $input-h;
		background: transparent;
		font: inherit;
		cursor: pointer;

		&::-webkit-slider-runnable-track { @include track }

		&::-moz-range-track { @include track }

		&::-ms-track { @include track }

		&::-webkit-slider-thumb {
			margin-top: .5*($track-h - $thumb-d);
			@include thumb;
		}

		&::-moz-range-thumb { @include thumb }

		&::-ms-thumb {
			margin-top: 0;
			@include thumb
		}

		&::-ms-fill-lower, 
		&::-ms-fill-upper {
			background: transparent;
		}

		&::-ms-tooltip { display: none }
		
		&:focus {
			outline: solid 0px transparent;
			
			&::-webkit-slider-thumb { @include thumb-focus }

			&::-moz-range-thumb { @include thumb-focus }

			&::-ms-thumb { @include thumb-focus }
		}
		
		& ~ & { --pos: calc(var(--y)*#{.01*$track-w}) }
		
		+ label {
			align-self: center;
			margin-bottom: .75em;
			text-align: center
		}
	}
	
	&[type='checkbox'] {
		position: absolute;
		left: -100vw;

		+ label {
			display: flex;
			align-items: center;
			align-self: flex-start;
			color: $c;
			cursor: pointer;

			&:before {
				margin-right: .375em;
				width: $box-d; height: $box-d;
				box-shadow: 0 0 0 2px $c;
				text-align: center;
				color: var(--c-sel, transparent);
				line-height: calc(#{$box-d} + 4px);
				content: '✔'
			}
		}

		&:checked + label { --c-sel: $hl }
	}
	
	&:focus, &:hover { + label { --c-hl: #000 } }
}

label {
	--c-hl: $ll;
	color: $c;
}

View Compiled

function update(e) {
	const _TG = e.target;
		
	if(_TG.tagName.toLowerCase() === 'input') {
		const _WRP = _TG.parentNode;
		
		let val = _TG.type === 'range' ? +_TG.value : (_TG.checked ? 1 : 0);
		
		_WRP.style.setProperty(`--${_TG.id.replace(/r|c|\d+/g, '')}`, val)
	}
};

addEventListener('input', update, false);
addEventListener('change', update, false);

View Compiled

This Pen is owned by Ana Tudor on CodePen.

See more by @thebabydino on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.