Border Gradient with CSS

custom.css

.ote_bgcolor {
	position: relative;
	border-radius: 16px;
	z-index: 1;
	border:0!important;
}
.ote_bgcolor:hover {
	position: relative;
	border-radius: 16px;
}
.ote_bgcolor::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(312deg, white 50%, #D239A6 75%, #D239A6 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
	transition: opacity 0.9s ease;
	opacity: 1;
}
.ote_bgcolor:nth-child(even):before {
	background: linear-gradient(227deg, white 50%, #D239A6 75%, #D239A6 100%);
}
.ote_bgcolor:nth-child(even):hover:after {
	background: linear-gradient(45deg, white 50%, #D239A6 75%, #D239A6 100%);
}
.ote_bgcolor::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(131deg, white 50%, #D239A6 75%, #D239A6 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
	transition: opacity 0.9s ease;
	opacity: 0; /* hidden by default */
}
.ote_bgcolor:hover::before {
	opacity: 0; /* default fade out */
}
.ote_bgcolor:hover::after {
	opacity: 1; /* hover fade in */
}
/* supplier model text */
.supplier_modeltxt::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(236deg, #1e1e1e 50%, #D239A6 75%, #D239A6 100%);
	-webkit-mask:
		linear-gradient(#1e1e1e 0 0) content-box,
		linear-gradient(#1e1e1e 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
	transition: opacity 0.9s ease;
	opacity: 1;
}
.supplier_modeltxt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(140deg, #1e1e1e 30%, #D239A6 85%, #D239A6 100%);
	-webkit-mask:
		linear-gradient(#1e1e1e 0 0) content-box,
		linear-gradient(#1e1e1e 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
	transition: opacity 0.9s ease;
	opacity: 0;
}
.supplier_modeltxt:hover::before {
	opacity: 0; /* default fade out */
}
.supplier_modeltxt:hover::after {
	opacity: 1; /* hover fade in */
}