Seminario CSS - Ejemplo de aplicación estilos para los bordes de un elemento

.bordesencillo{
  width: 200px;
  border-style: solid;
  margin: 20px;
}   
.bordesdiferentes{
  width: 200px;          
  border-style: solid dotted solid dotted;
  margin: 20px;
}      
.completo{
    width: 200px;
    border-style: solid;
    border-width: 0.5em;
    border-color: red;
    margin: 20px;
}
.colores{
    width: 200px;
    border-style: dashed;
    border-width: 0.5em;
    border-color: red blue green violet;
    margin: 20px;
}       
.atajo{
    width: 200px;
    border: 0.5em solid red;
    margin: 20px;
}
.izquierda{
    padding: 2px;
    margin: 20px;
    border-left: 0.5em solid red;
    background-color: lightgray;
}

Bordes sencillos

Borde sólido

Borde sólido arriba y abajo y de puntos a izquierda y derecha

Borde sólido con grosor y color

Borde con guiones con grosor y colores diferentes

Borde sólido con grosor y color empleando el atajo border

Borde sólido con grosor y color empleando el atajo border-left

Inicio

.contorno{
  border-style: solid;
  border-width: 10px;
  border-color: black;
  outline-style: solid;
  outline-width: 10px;
  outline-color: red;
}

Contorno

El contorno se emplea para resaltar un elemento, no afecta a las dimensiones, pero se solapa con otros elementos.

Borde y contorno

Inicio

.cuadro_verde{
    float: left;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
    width: 200px;
    height: 200px; 
    background-color: green;
    margin: 10px;
}

.rtodos{
    border-radius: 20px;    
}

.rdos{             
    border-radius: 20px 40px;
}

.rtres{           
    border-radius: 20px 40px 60px;
}

.rcuatro{           
    border-radius: 20px 40px 60px 80px;
}

Bordes redondeados

Un solo valor

Dos valores

Tres valores

Cuatro valores

Inicio

.sombra{
    box-shadow: 10px 10px 5px #999999;
}

.sombra2{
    box-shadow: 10px 10px 5px 5px #999999;
}
.sombra3{
    box-shadow: 0px 10px #999999;
}

.sombra4{
    box-shadow: 0px 10px 8px #888888, 10px 0px 15px #666666;
}

Sombra

La sobra no afecta al tamaño del elemento, y se solapa con otros elementos.

Blur

Blur+spread

Sombra a un lado

Dos sombras

Inicio