CSS gradient framing for a white box with text

index.html

<div class="fancy-border-outer">
	<p class="fancy-border-inner">text with colorful gradient frame</p>
</div>
 
<div class="fancy-border-outer">
	<p class="fancy-border-inner">text with colorful <br> gradient frame <br> Testbla</p>
</div>

style.css

/**
 * Colorful framing
 */
*{ 
	font-family: "Arial";
	color:#808080;}
 
.fancy-border-inner{
	margin:0;
	padding:20px;
	background:white
}
.fancy-border-outer {
	display:inline-block;
	padding:5px;
}	
 
.fancy-border-outer{
	background: #cfdc00; /* Old browsers */
	background: -moz-linear-gradient(65deg, #57a6db 0%, #93cc3f 72%, #e9f2a4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#57a6db), color-stop(72%,#93cc3f), color-stop(100%,#e9f2a4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(65deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* IE10+ */
	background: linear-gradient(15deg, #57a6db 0%,#93cc3f 72%,#e9f2a4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a6db', endColorstr='#e9f2a4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

xbpdZw.markdown

CSS gradient frame

A Pen by Mario Winkler on CodePen.

License.