re4388

/**
 * Inner rounding
 */

div {
	outline: .6em solid #655;
	box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
	
	max-width: 10em;
	border-radius: .8em;

re4388

/**
 * Horizontal stripes
 */

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;

re4388

/**
 * Vertical stripes
 */

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

re4388

/**
 * Diagonal stripes - repeating-linear-gradient() method
 */

background: repeating-linear-gradient(60deg, 
              #fb3, 
              #fb3 15px,
              #58a 0, 
              #58a 30px);

re4388

/**
 * Subtle stripes
 */

background: #58a;
background-image: repeating-linear-gradient(30deg, 
              hsla(0,0%,100%,.1), 
              hsla(0,0%,100%,.1) 15px,
              transparent 0, 
              transparent 30px);

re4388

/**
 * Flexible background positioning
 * via calc()
 */

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-position: calc(100% - 20px) calc(100% - 10px);
	

re4388

/**
 * Flexible background positioning
 * via extended background-position
 */

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-origin: content-box;
	

re4388

/**
 * Multiple borders
 */

div {
	width: 100px;
	height: 60px;
	margin: 25px;
	background: yellowgreen;
	box-shadow: 0 0 0 10px #655,

re4388

/**
 * Translucent borders
 */

body {
	background: url('http://csssecrets.io/images/stone-art.jpg');
}

div {
	border: 10px solid hsla(0,0%,100%,.5);