Desarrollo web, SEO, Redes Sociales.

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

Valoración: 
Promedio: 5 (3 votos)

Desarrollo web

  • Dominio (.com,.net, .es ...).
  • Hospedaje Web (hosting).
  • Webs autogestionables.
  • Webs escalables.
  • Diseños para móviles y tabletas (Responsive).
  • Intranets y Extranets.
  • Tiendas Online.
  • De PSD a Drupal.

Presencia en Internet

  • Comunity Manager.
  • SEO.
  • SEM.
  • Posicionamiento en Google.
  • Redes sociales.
  • Listas de Correos (Newsletters).
  • Web Temáticas.
  • Creacción de folletos, trípticos, dípticos, flyers...