Ejemplos de Bordes en CSS, como utilizarlos
Os explicamos como utilizar bordes con hojas de estilos con estos ejemplos prácticos que iremos actualizando
Un borde simple
Bordes traslúcidos en CSS
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
Css border-radius
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Bordes múltiples
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
Se puede hacer multiples
background: yellowgreen;
box-shadow: 0 0 0 10px #655, box-shadow: 0 0 0 15px #655, box-shadow: 0 0 0 5px #655;
Podemos ver el efecto que produce varias sombras, hasta el punto de tener los bordes que queramos.
Dos bordes con la solución Outline
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
Podemos conseguir dos bordes con outline
background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;
outline-offset: 10px;
Además de los dos bordes con outline con outline-offset (que acepta medidas negativas) podemos controlar límites de los elementos