Bordes en CSS

En este artículo vamos a ver que podemos ver que podemos hacer con los bordes en CSS.

Bordes

Las propiedades del borde de CSS te permiten especificar el estilo, el ancho, el color y la redondez del borde de un elemento.

Hay tres propiedades de un borde que puedes cambiar:

  • El border-style especifica si un borde debe ser sólido, línea discontinua, doble línea o uno de los otros valores posibles.
  • El border-width especifica el ancho de un borde.
  • El border-color especifica el color de un borde.
  • El border-radius especifica que tan redondo serán las esquinas del borde.

La propiedad border-style especifica qué tipo de borde mostrar.

Podemos escoger entre 10 valores:

dotted: define un borde punteado
dashed: define un borde discontinuo
solid: define un borde sólido
double: define un borde doble
groove: define un borde acanalado en 3D. El efecto depende del valor del color del borde
ridge: define un borde surcado en 3D. El efecto depende del valor del color del borde
inset: define un borde insertado en 3D. El efecto depende del valor del color del borde
outset: define un borde de inicio en 3D. El efecto depende del valor del color del borde
none: no define ningún borde
hidden: Define un borde oculto

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

border-style: none

border-style: hidden

<p style="border-style: dotted;">border-style: dotted</p>
<p style="border-style: dashed;">border-style: dashed</p>
<p style="border-style: solid;">border-style: solid</p>
<p style="border-style: double;">border-style: double</p>
<p style="border-style: groove;">border-style: groove</p>
<p style="border-style: ridge;">border-style: ridge</p>
<p style="border-style: inset;">border-style: inset</p>
<p style="border-style: outset;">border-style: outset</p>
<p style="border-style: none;">border-style: none</p>
<p style="border-style: hidden;">border-style: hidden</p>

Ten en cuenta que puedes cambiar individualmente el estilo de los lados inferior, izquierdo, superior y derecho del borde de un elemento usando las propiedades.

border-style: dotted dashed solid double

<p style="border-style: dotted dashed solid double;">border-style: dotted dashed solid double</p>

La propiedad border-width le permite establecer el ancho de los bordes de un elemento. El valor de esta propiedad podría ser una longitud en px, pt o cm o debería estar configurado en thin, medium o thick.

Puede cambiar individualmente el ancho de los bordes inferior, superior, izquierdo y derecho de un elemento usando las siguientes propiedades:

border-bottom-width cambia el ancho del borde inferior.

border-top-width cambia el ancho del borde superior.

border-left-width cambia el ancho del borde izquierdo.

border-right-width cambia el ancho del borde derecho.

Este es un borde sólido con un ancho de 4px.

Este es un borde sólido con un ancho de 4pt.

Este es un borde sólido con un ancho thin.

Este es un borde sólido con un ancho medium.

Este es un borde sólido con un ancho de thick.

Este es un borde con valores diferentes para cada lado.

<p style="border-width:4px; border-style:solid;">Este es un borde sólido con un ancho de 4px.</p>
<p style="border-width:4pt; border-style:solid;">Este es un borde sólido con un ancho de 4pt.</p>
<p style="border-width:thin; border-style:solid;">Este es un borde sólido con un ancho thin.</p>
<p style="border-width:medium; border-style:solid;">Este es un borde sólido con un ancho medium.</p>
<p style="border-width:thick; border-style:solid;">Este es un borde sólido con un ancho de thick.</p>
<p style="border-bottom-width:4px;border-top-width:10px; border-left-width: 2px;border-right-width:15px;border-style:solid;">Este es un borde con valores diferentes para cada lado.</p>

La propiedad border-color define el color del borde. Los valores son los valores de color, por ejemplo, «#123456» (hexadecimal), «rgb(123,123,123)» (RGB) o «yellow» (por nombre del color).

Este es un borde sólido con color rojo.

Este es un borde sólido con color verde.

<p style="border-style: solid; border-color: red;">Este es un borde sólido con color rojo.</p>
<p style="border-style: solid; border-color: green;">Este es un borde sólido con color verde.</p>

Podemos darle a cada borde un color distinto.

Este es un borde sólido con varios colores.

<p style="border-style: solid; border-color: blue yellow red green;">Este es un borde sólido con varios colores.</p>

Puedes ver que en una sola línea le damos valores a los distintos bordes.

Podemos usar una sola línea para asignar valores a border-style, border-width y border-color.

¿Cómo lo hacemos y cómo funciona?

Si la propiedad border-style tiene cuatro valores:

border-style: double solid dotted dashed;
el borde superior será double
el borde derecho es solid
el borde inferior es dotted
el borde izquierdo está dashed

Si la propiedad border-style tiene tres valores:
border-style: double solid dotted;
el borde superior será double
los bordes derecho e izquierdo son solid
el borde inferior es dotted

Si border-style tiene dos valores:
border-style: dotted solid;
los bordes superior e inferior serán dotted
los bordes derecho e izquierdo son solid

Si border-style tiene un valor:
border-style: dotted;
los cuatro bordes serán dotted.

Funciona exactamente igual para border-width y border-color.

También podemos abreviar y especificar los valores de los bordes en una sola línea

La propiedad de borde es una propiedad abreviada de las siguientes propiedades de borde individuales:

border-width
border-style (requerido)
border-color

Todos los valores en una sola línea.

<p style="border: 10px solid blue;">Todos los valores en una sola línea.</p>

Bordes redondeados

La propiedad border-radius se usa para agregar bordes redondeados a un elemento.

Esquina normal.

Esquina con redondeo.

Esquina con redondeo.

Esquina con redondeo.

<p style="border: 5px solid green; border-radius: 0px;">Esquina normal.</p>
<p style="border: 5px solid green; border-radius: 5px;">Esquina con redondeo.</p>
<p style="border: 5px solid green; border-radius: 10px;">Esquina con redondeo.</p>
<p style="border: 5px solid green; border-radius: 15px;">Esquina con redondeo.</p>

¿Te sirvió esta información? ¿Quieres saber más? Escríbeme aquí abajo y vemos que te puedo ofrecer.

También puedes ver mis otros artículos relacionados. ¿Qué es CSS?, ¿Cómo utilizar los colores en CSS?, Fondos en CSS, Fuentes en CSSTextos en CSS

Deja un comentario