<blockquote>
	<p>All of us, at some time or other, need help. Whether we're giving or receiving help, each one of us has something valuable to bring to this world.</p>
	<footer>- <cite>Mr. Rogers</cite></footer>
</blockquote>
$insetBorder: true;
$borderWidth: 8px;
$color: blueviolet;

* {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background-color: scale-color($color, $lightness: 95%);
	color: scale-color($color, $lightness: -60%);
	font-family: Rosario, sans-serif;
}

blockquote {
	// Combination border and box shadow for squared-off appearance
	$boxShadow: if($insetBorder, inset 0 -#{$borderWidth}, 0 $borderWidth);
	
	border-left: $borderWidth solid $color;
	box-shadow: $boxShadow scale-color($color, $lightness: 50%);
	
	// Classic border
	// border-left: 30px solid $color;
	// border-bottom: 30px solid scale-color($color, $lightness: 50%);
	
	width: 80vw;
	padding: 1rem 1.5rem calc(1rem + 8px);
	margin: 0;
	
	p {
		margin: 0 0 1rem;
		font-size: 1.5rem;
		line-height: 1.5;
	}
	
	footer {
		font-size: .875rem;
	}
	
}
View Compiled
// Technique described @link https://dev.to/5t3ph/quick-css-tip-two-toned-square-join-borders-3843

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.