csssecrets

/**
 * Marching ants border
 */
 
@keyframes ants { to { background-position: 100% 100% } }

div {
	padding: 1em;
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box,

csssecrets

/**
 * Footnote-style border
 */

.footnote {
	border-top: .15em solid transparent;
	border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
	padding-top: .5em;
	font: 220%/1.4 Baskerville, Palatino, serif;
}

csssecrets

/**
 * Basic border-image demo
 */

div {
	border: 40px solid transparent;
	border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \
	                      <circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \
	                      <circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \
	                      <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \

csssecrets

/**
 * Test: color stops with two locations
 * PASS if green stripes, FAIL if red
 */

background: red;
background: repeating-linear-gradient(-45deg, limegreen 0 20px, green 20px 60px);
min-height: 100%;

csssecrets

/**
 * Conic gradients test
 * PASS if green gradient, FAIL if red.
 */

background: red;
background: conic-gradient(limegreen, green, limegreen);
min-height: 100%;

csssecrets

/**
 * Checkerboard with SVG
 */

background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;

csssecrets

/**
 * Scoop corners
 */

div {
	background: #58a;
	background:	radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
	            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
	            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
	            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;

csssecrets

/**
 * Beveled corners — with gradients
 */

div {
	background: #58a;
	background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
	            linear-gradient(-135deg, transparent 15px, #58a 0) top right,
	            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
	            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;

csssecrets

/**
 * Beveled corners — with border-image and an inline SVG
 */

div {
	border: 21px solid transparent;
	border-image: 1 url('data:image/svg+xml,\
	                      <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
	                      <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
	                      </svg>');

csssecrets

/**
 * Beveled corners — with clip-path
 */

div {
	background: #58a;
	-webkit-clip-path: 
		polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
		calc(100% - 20px) 100%,
		20px 100%, 0 calc(100% - 20px), 0 20px);