%div

// CSS Corners shorthand syntax
// [corner-size] [border-width] [border-style] [border-color];

$corner-shorthand : 40px 10px solid black;
										
// Browsers that do not support CSS clip-path will just show a full border around element

@mixin corners($shorthand) {
	$cs : nth($shorthand, 1); // corner-size
		$-cs : calc(100% - #{$cs}); // corner-width from ends
	$bw : nth($shorthand, 2); // border-width
	$bs : nth($shorthand, 3); // border-style
	$bc : nth($shorthand, 4); // border-color
		
	border: $bw $bs $bc;

	$bw : $bw + 1px; // border-width
	$-bw : calc(100% - #{$bw} - 1px); // border-width from ends
	
	clip-path: polygon(0 $cs, 0 0, $cs 0, $cs $bw, $-cs $bw, $-cs 0, 100% 0, 100% $cs, $-bw $cs, $-bw $-cs, 100% $-cs, 100% 100%, $-cs 100%, $-cs $-bw, $cs $-bw, $cs 100%, 0 100%, 0 $-cs, $bw $-cs, $bw $cs);
}

///////////////////////////////////////////

html, body { height: 100%; }
body {
	display: flex;
	align-items: center;
	justify-content: center;
}

div {
	@include corners($corner-shorthand);
	width: 400px;
	height: 200px;
}


///////////////////////////////////////////

// Demo animation

div {
	background: repeating-linear-gradient(45deg, #FFF 0, #FFF 10px, #EEE 0, #EEE 20px);
	animation: resize 10s 2s ease-in-out infinite;
}

@mixin size($w, $h) {
	width: $w * 1px;
	height: $h * 1px;
}

@keyframes resize {
	0%, 100% { @include size(400, 200) }
	20% { @include size(100, 400); }
	40% { @include size(400, 100); }
	60% { @include size(400, 400) }
	80% { @include size(200, 250); }
}