Diferentes tipos de bordes css en tu blog o web

Hay muchas formas de darle estilo con css a tu blog, como ponerle fondos marcos, colores, etc... en esta ocación les voy amostrar diferentes estilos de bordes que se le puede integrar a tu blog, de manera muy sencilla y ya tu le puedes ir modificando el color, ancho, etc...

Esta capa tiene el borde sólido:
div.bordesolido{
    border: 1px solid #aaaaaa;
}

Este elemento tiene bordes distintos para cada lado. .bordeporlados{     border-top: 1px solid #ff9999;     border-right: 2px dotted #99ff99;     border-bottom: 2px dashed #9999ff;     border-left: 3px double #666666; }

Aquí he puesto un borde con línea de puntos...
div.bordepunteado{
    border: 2px dotted #ff8833;
}

Este elemento DIV tiene un borde doble (double), pero para verlo tienes que poner un ancho de borde mayor.
div.bordedoble{
    border: 3px double #0087f0;
}

Este DIV tiene el borde "dashed", que es como punteado, pero con el punto más largo.
div.bordedashed{
    border: 2px dashed #cccccc;
}

Aquí he puesto un borde tipo "groove", que crea una especie de relieve.
div.bordegroove{
    border: 5px groove #006600;
}

En esta capa he puesto un borde tipo ridge
div.borderidge{
    border: 10px ridge #6666cc;
}

Tenemos aquí un borde inset, que también crea una especie de relieve como si el elemento estuviese hundido, combiando el borde en distintos tonos más claros u oscuros.
div.bordeinset{
    border: 10px inset #131313;
    background-color: #444444;
}

Aquí tenemos un bordeoutset, que es como si el borde produciera un relieve que imita como si estuviera levantado. En este caso le he puesto un color de fondo para que se vea mejor el efecto.
div.bordeoutset{
    border: 10px outset #cccccc;
    background-color: #cccccc;
}

Tweet