Tipos de borde con CSS

Los bordes con CSS tienen ocho variantes y se aplican comunmente de dos maneras:

En la etiqueta HTML

Se le atribuye a la etiqueta del elemento en el que queremos pintar los border un atributo style y los valores asignarán la declaracion de borde, el tamaño del borde, y el tipo de borde que busquemos para nuestro diseño.

<div style=”border: 1px dotted;”>
         <p> Dotted (punteado) </p>
</div>

Con hoja de estilos

Usando la hoja de estilos sera necesario que asignemos a la etiqueta del elemento que deseemos asignar los bordes un atributo id si es un elemento único o un atributo class si los estilos los queremos en varios elementos.

HTML

<div id="nombre del elemento">
         <p> Dotted (punteado) </p>
</div>

En la hoja de estilos asignaremos el borde y sus características de la siguiente manera.

CSS

#nombre del elmento{
border: 1px solid;
}

Los distintos tipos de bordes que podemos usar son los siguiente:

Dotted (punteado)

Dashed (discontinuo)

Solid (Sólido)

Double (Doble)

Groove (Surco)

Ridge (Cresta)

Inset (Recuadro)

Outset (Principio)