titox

/**
 * Polka dot
 */

background: #655;
background-image:   radial-gradient(yellow 20%, transparent 0),
					radial-gradient(blue 20%, transparent 0),
                    radial-gradient(red 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px, 30px 30px;

titox

/**
 * Inner rounding
 */

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

titox

/**
 * Multiple borders
 */

body {
padding: 20%;
	text-align: center;
}
div {
	margin: 0 auto;

titox

/**
 * Multiple borders
 */

body {
	text-align :center;
}
div {
	width: 200px;
	height: 200px;

titox

/**
 * Translucent borders
 */

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

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

titox

/**
 * The first commented line is your dabblet’s title
 */

background-color: red;
background-image: linear-gradient(-90deg, #000 25%, #FFF 25%);
background-size: 130px;

titox

/**
 * list with 1px solid left gradient border

 */
  

.item {
	font-family: Helvetica, 'sans-serif';
	background-repeat: repeat-y;
	background-image: linear-gradient(45deg,#CCCCCC 50%,transparent 50%);

titox

/**
 * The first commented line is your dabblet’s title
 */

background: linear-gradient( red 25%,#8b0 25%);
background-size:100px 100px;

titox

/**
 * 1 stripe
 */


background: linear-gradient(bottom, white 60%, #8b0 60%) repeat-x;
background-size: 800px 900px;

titox

/**
 * basic lines
 */


background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 2px;