<h1>Crear Bordes</h1>
<h2>Bordes Internos</h2>
<div class="borde1">box-shadow: inset 0 0 0 1px red;</div>
<div class="borde2">box-shadow: inset 0 0 0 5px red;</div>
<div class="borde3">box-shadow: inset 5px 0 red;</div>
<div class="borde4">box-shadow: inset -5px 0 red;</div>
<div class="borde5">box-shadow: inset 0 5px red;</div>
<div class="borde6">box-shadow: inset 0 -5px red;</div>

<p>Bordes Externos</p>
<div class="borde7">box-shadow:  0 0 0 1px red;</div>
<div class="borde8">box-shadow:  0 0 0 5px red;</div>
<div class="borde9">box-shadow:  -5px 0 ed;</div>
<div class="borde10">box-shadow:  5px 0 red;</div>
<div class="borde11">box-shadow:  0 -5px red;</div>
<div class="borde12">box-shadow:  0 5px red;</div>




<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
/* Bordes internos */
.borde1 {box-shadow: inset 0 0 0 1px red;}
.borde2 {box-shadow: inset 0 0 0 5px red;}
.borde3 {box-shadow: inset 5px 0 red;}
.borde4 {box-shadow: inset -5px 0  red;}
.borde5 {box-shadow: inset 0 5px red;}
.borde6 {box-shadow: inset 0 -5px red;}

/* Bordes externos */
.borde7 {box-shadow: 0 0 0 1px red;}
.borde8 {box-shadow: 0 0 0 5px red;}
.borde9 {box-shadow: -5px 0 red;}
.borde10 {box-shadow: 5px 0 red;}
.borde11 {box-shadow: 0 -5px red;}
.borde12 {box-shadow: 0 5px red;}



/* SKIN */
body {background: #FAFAFA; color: #999; padding: 3em; font-family: 'Oswald', sans-serif;  }
h1,h2,h3 {color: skyblue; font-weight: 300;}
h1 {font-weight: 100; font-size: 3em;}
h2 {font-size: 2em; line-height: .15em;}
div {background: #CCC; padding: 2em 0; margin: 1em 0; color: #444; display: block; text-align:center;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.