Create Gradient Border Radius – Stunning CSS

thumbnail

In this tutorial, you will learn to create gradient border radius in rectangle shape using CSS. We will create two box, the first box will be named with box-1 and the other box will be named with box-2. The name will be place in the middle of the box with white text color.

The CSS is shown below:

.box-1,
.box-2 {
	width: 300px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.box-1,
.box-1::before {
	border-radius: 25px;
}

.box-1 {
	position: relative;
	border: 4px solid transparent;
	background: #01080e;
	background-clip: padding-box;
}

.box-1::before {
	position: absolute;
	top: -4px;
	bottom: -4px;
	left: -4px;
	right: -4px;
	background:
		radial-gradient(circle at top left,
			#9d73b9,
			#fd1d1d,
			#fcb045);
	content: '';
	z-index: -1;
}

.box-2 {
	border: double 4px transparent;
	background-image:
		linear-gradient(#01080e, #01080e),
		radial-gradient(circle at top left,
			#9d73b9,
			#fd1d1d,
			#fcb045);
	background-origin: border-box;
	background-clip: content-box, border-box;
	border-radius: 30px;
}

The full HTML and CSS is something like this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box-1,
.box-2 {
	width: 300px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.box-1,
.box-1::before {
	border-radius: 25px;
}

.box-1 {
	position: relative;
	border: 4px solid transparent;
	background: #01080e;
	background-clip: padding-box;
}

.box-1::before {
	position: absolute;
	top: -4px;
	bottom: -4px;
	left: -4px;
	right: -4px;
	background:
		radial-gradient(circle at top left,
			#9d73b9,
			#fd1d1d,
			#fcb045);
	content: '';
	z-index: -1;
}

.box-2 {
	border: double 4px transparent;
	background-image:
		linear-gradient(#01080e, #01080e),
		radial-gradient(circle at top left,
			#9d73b9,
			#fd1d1d,
			#fcb045);
	background-origin: border-box;
	background-clip: content-box, border-box;
	border-radius: 30px;
}
  
</style>
</head>
<body>

<h2>Gradient Border Radius</h2>
<div class="container">
	<div class="box-1">
		<span>Box 1</span>
	</div>
	<div class="box-2">
		<span>Box 2</span>
	</div>
</body>
</html>

The result when you open in the browser will be like below:

Back To Top