<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, #eee 3px, transparent 0, transparent 10px);
	font: 700 1.25em segoe script, comic sans ms, cursive
}

div {
	position: relative;
	border: solid $bw transparent;
	padding: 1em;
	background: rgba(#000, .1) padding-box;
	
	&:before {
		position: absolute;
		top: -$bw; right: -$bw; bottom: -$bw; left: -$bw;
		padding: $bw;
		background: linear-gradient(45deg, gold, purple, cyan, deeppink);
		--sl: red 30%, transparent 0, transparent 70%, red 0;
		--m: 
			linear-gradient(red, red) content-box, 
			linear-gradient(red, red) content-box, 
			linear-gradient(90deg, var(--sl)) 0 0/ 40px 40px round,
			linear-gradient(var(--sl)) 0 0/ 40px 40px round;
		-webkit-mask: var(--m);
		-webkit-mask-composite: xor, source-over, source-in, source-over;
						mask: var(--m);
						mask-composite: exclude, add, intersect, add;
		content: ''
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.