<div class="full border">Full gradient border</div>
<div class="sides border">Gradient border on just the  horizontal sides</div>
<div class="sides-2 border">Gradient border on just the  vertical sides</div>
<div class="full-withradius border">Gradient border with border radius</div>
<div class="border linear-repeating">Repeating gradient border </div>
<div class="border radial-repeating">More repeating gradient border</div>
body {
	margin: 60px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: 60px;

.border {
	font-size: 1.6rem;
	display: grid;
	place-items: center;
	min-height: 200px;
	border: 8px solid;
	padding: 1rem;

.full {
	border-image: linear-gradient(45deg, turquoise, greenyellow) 1;

.sides {
	border-image: linear-gradient(to left, turquoise, greenyellow) 1 0;
.sides-2 {
	border-image: linear-gradient(to bottom, turquoise, greenyellow) 0 1;

.linear-repeating {
	border-width: 10px;
	border-image: repeating-linear-gradient(45deg, turquoise, pink 4%) 1;

.radial-repeating {
	border-width: 20px;
	border-image: repeating-radial-gradient(
			circle at 10px,
			pink 2px,
			greenyellow 4px,
			pink 2px

/* border radius example is drawn from this pen: https://codepen.io/shshaw/pen/MqMZGR
I've added a few comments on why we're using certain properties

.full-withradius {
	position: relative;
	background: #fff;

	/*The background extends to the outside edge of the padding. No background is drawn beneath the border.*/
	background-clip: padding-box;

	border: solid 8px transparent;
	border-radius: 0.8rem;

	&:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		margin: -8px; /* same as border width */
		border-radius: inherit; /* inherit container box's radius */
		background: linear-gradient(to left, turquoise, greenyellow);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.