11. Bordes CSS

La propiedad CSS border te permite especificar el estilo, ancho y color del borde de un elemento. La propiedad border-style especifica que tipo de borde mostrar. Los siguientes valores son permitidos:

  • dotted: define un borde punteado
  • dashed: define un borde discontinuo
  • solid: define un borde sólido
  • double: define un doble borde
  • groove: define un borde de ranura
  • ridge: define un borde rugoso
  • inset: define un borde insertado 3D. El efecto depende del valor del color del borde.
  • outset: define un borde inicial 3D. El efecto depende del valor del color del borde.
  • none: define un borde oculto

La propiedad de border-style puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Ejm

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

border-width

La propiedad border-width especifica el ancho de los cuatro bordes. El ancho se puede establecer como un tamaño específico (en px, pt, cm, em, etc.) o usando uno de los tres valores predefinidos: thin (fino), medium (medio) o thick (grueso).

Ejm

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Anchos laterales específicos

La propiedad border-width puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Ejm

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px arriba y abajo, 20px en los lados */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px arriba y abajo, 5px en los lados */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px arriba, 10px derecha, 4px abajand 35px left */
}

border-color

La propiedad border-color es usada para definir el color de los 4 bordes. El color se puede configurar mediante:

  • Nombre: especifica un nombre de color como “red”.
  • Hexadecimal: especifica un valor hexadecimal, como “#ff0000”.
  • RGB: especifica un valor RGB como rgb(255,0,0).
  • HSL: especifica un valor HSL como hsl(0,100%,50%).

Nota: si no se establece border-color, hereda el color del elemento.

Ejm

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

La propiedad border-color puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Ejm

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Lados de borde CSS

De los ejemplos de las páginas anteriores, ha visto que es posible especificar un borde diferente para cada lado. En CSS, también hay propiedades para especificar cada uno de los bordes (superior, derecho, inferior e izquierdo).

Ejm

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

El ejemplo anterior da el mismo resultado que este:

Ejm

p {
  border-style: dotted solid;
}

Así es como funciona:

Si la propiedad border-style tiene 4 valores:

  • border-style: dotted solid double dashed;
    • El borde de arriba dotted
    • El borde derecho solid
    • El borde de abajo double
    • El borde izquierdo dashed

Si la propiedad border-style tiene 3 valores:

  • border-style: dotted solid double;
    • El borde de arriba es dotted
    • Los bordes izquierdo y derecho son solid
    • El borde de abajo es double

Si la propiedad tiene 2 valores

  • border-style: dotted solid;
    • Los bordes de arriba y abajo dotted
    • Los bordes laterales solid

Si la propiedad tiene un sólo valor

  • border-style: dotted;
    • Todos los bordes son dotted

Ejm

/* Cuatro valores */
p {
  border-style: dotted solid double dashed;
}

/* Tres valores */
p {
  border-style: dotted solid double;
}

/* Dos valores */
p {
  border-style: dotted solid;
}

/* Un valor */
p {
  border-style: dotted;
}

Propiedad de borde abreviado CSS

Como vio en la página anterior, hay muchas propiedades a considerar cuando se trata de bordes. Para acortar el código, también es posible especificar todas las propiedades de borde individuales en una propiedad. La propiedad border es una propiedad abreviada para las siguientes propiedades de borde individuales.

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

Ejm

p {
  border: 5px solid red;
}

También puede especificar todas las propiedades de borde individuales para un solo lado:

Ejm

p {
  border-left: 6px solid red;
}

Bordes redondeados

La propiedad border-radius es usada para añadir bordes redondeados a un elemento.

Ejm

p {
  border: 2px solid red;
  border-radius: 5px;
}

Resumen

Propiedad Descripción
border Establece todas las propiedades de borde en una declaración
border-bottom Establece todas las propiedades del borde inferior en una declaración
border-bottom-color Establece el color del borde inferior.
border-bottom-style Establece el estilo del borde inferior.
border-bottom-width Establece el ancho del borde inferior.
border-color Establece el color de los cuatro bordes.
border-left Establece todas las propiedades del borde izquierdo en una declaración
border-left-color Establece el color del borde izquierdo.
border-left-style Establece el estilo del borde izquierdo.
border-left-width Establece el ancho del borde izquierdo.
border-radius Establece las cuatro propiedades border-*-radius para esquinas redondeadas
border-right Establece todas las propiedades del borde derecho en una declaración
border-right-color Establece el color del borde derecho
border-right-style Establece el estilo del borde derecho.
border-right-width Establece el ancho del borde derecho
border-style Establece el estilo de los cuatro bordes.
border-top Establece todas las propiedades del borde superior en una declaración
border-top-color Establece el color del borde superior.
border-top-style Establece el estilo del borde superior.
border-top-width Establece el ancho del borde superior
border-width Establece el ancho de todos los bordes
Scroll al inicio