Guía rápida sobre los bordes en CSS

17-02-2014 - Andrés Cruz

Con esta propiedad es posible definir el color, tamaño y estilo de cada uno de los 4 bordes que definen la caja de un elemento; veamos cada una de las propiedades que lo conforman:

border-width

Define la anchura que tendrá el borde; la anchura de los bordes se definen con las cuatro propiedades siguientes:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Cada uno de las propiedades pasadas se explica por sí sola; la anchura de los mismos se indica mediante alguna unidad de medida soportada por CSS.

Si se quiere establecer de forma simultánea la anchura de todos los bordes, podemos utilizar la siguiente propiedad:

• border-width

En donde recibe de uno a cuatro valores:

border-width:4px 5px 6px 7px

• top border: borde superior 4px
• right border: borde derecho 5px
• bottom border: borde inferior 6px
• left border: borde izquierdo 7px

border-width:4px 5px 6px

• top border: borde superior 4px
• right y left border: borde derecho e izquierdo: 5px
• bottom border: borde inferior 6px

border-width:4px 5px

• top y bottom borders: borde superior e inferior: 4px
• right y left borders 5px: borde derecho e izquierdo: 5px

border-width:4px

• Todos los bordes: 4px

Border-style

Define el estilo de los bordes:

• solid
• dashed
• dotted
• double
• groove
• ridge
• inset
• outset

También es posible definirlos uno a uno (por cada lado del borde):

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

O todos con una sola propiedad:

• border-style

Su funcionamiento es exactamente igual que el de border-width.

Border-color

Define el color; viene dado en RGB (#111111,#001122...) o el nombre del color en inglés (red, blue...):

#border-color1
{
	border-color:#F00000;
}

También es posible definirlos uno a uno (por cada lado del borde):

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Su funcionamiento es exactamente igual que el de border-width.

Ejemplos:

border-style y border-color:

    #solid
    {
	border-color:#F00000;
	border-style:solid;
    }
    

	#dashed
	{
	border-color:#F00000;
	border-style:dashed;
	}
    

	#dotted
	{
	border-color:#F00000;
	border-style:dotted;
	}
    

	#groove
	{
	border-color:#F00000;
	border-style:groove;
	}
    

	#ridge
	{
	border-color:#F00000;
	border-style:inset;
	}
    

	#outset
	{
	border-color:#F00000;
	border-style:outset;
	}
    

	#double
	{
	border-color:#F00000;
	border-style:double;
	}
    

border-style, border-color y border-width:

También es posible definir todas las propiedades en una sola propiedad con border:

#border1
{
	border:2px #F00000 solid;
}
    

#border2
{
	border-width:2px;
	border-color:#F00000;
	border-style:solid;
}
    

Para ambos casos vemos el mismo resultado; lo único que varía es la cantidad de líneas para obtener el resultado.

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy