Ejemplos de Bordes en CSS, como utilizarlos
Los bordes en CSS se aplican mediante la propiedad border y permiten definir el estilo, grosor y color de los contornos de los elementos HTML. Las propiedades principales son border-style (solid, dashed, dotted), border-width, border-color y border-radius para esquinas redondeadas, con múltiples combinaciones posibles.
Os explicamos como utilizar bordes con hojas de estilos CSS con estos ejemplos prácticos. También te recomendamos el artículo sobre redondeo interno con CSS. Aquí van los ejemplos 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