<div>
	<p>This is a pure CSS dashed gradient border! No canvas or SVG here. And no extra elements! And no covers (opaque elements to hide other elements) involved! We can have a (semi)tranparent background on the element it's applied to so that we can see through to whatever element is in the back. And the corners stay pretty on resize - just try it!</p>
	<p>Cake pie gingerbread brownie chocolate pudding. Chocolate cookie donut macaroon chocolate cake ice cream cupcake. Honey bear claw sugar plum bear claw brownie apple pie chocolate cake cookie pastry. Danish pie fruitcake sweet roll sesame cinnamon cloves.</p>
</div>

$bw: 5px;

body {
	box-sizing: border-box;
	margin: 0;
	padding: 2vmin;
	min-height: 100vh;
	background: repeating-linear-gradient(45deg, #eee 0 3px, #0000 0 10px);
	font: 700 1.25em segoe script, comic sans ms, cursive
}

div {
	position: relative;
	border: solid $bw #0000;
	padding: 1em;
	background: rgba(#000, .1) padding-box;
	
	&:before {
		position: absolute;
		inset: -$bw;
		border: inherit;
		background: linear-gradient(45deg, gold, purple, cyan, deeppink) border-box;
		--sl: red 30%, #0000 0 70%, red 0;
		--lyr: conic-gradient(red 0 0);
		mask: 
			var(--lyr) padding-box exclude, 
			var(--lyr) padding-box add, 
			linear-gradient(90deg, var(--sl)) 0 0/ 40px 40px round intersect,
			linear-gradient(var(--sl)) 0 0/ 40px 40px round;
		content: ''
	}
}