CSS Borde

CSS Border (Borde) es una propiedad que se utiliza para definir el estilo de borde de un elemento.

El borde se puede aplicar a cualquier elemento HTML para mejorar el efecto visual, separar contenido o resaltar elementos.

Las propiedades de borde CSS incluyen principalmente el ancho del borde, el estilo del borde, el color del borde y la propiedad abreviada.

Propiedades de borde CSS

Las propiedades de borde CSS permiten especificar el estilo y el color del borde de un elemento.

Borde en los cuatro lados


Borde inferior rojo


Borde con esquinas redondeadas


Borde izquierdo con un ancho y color azul

Estilo de borde

La propiedad de estilo de borde especifica qué tipo de borde se mostrará.

border-styleLa propiedad se utiliza para especificar el tipo de borde que se mostrará.

Los valores permitidos son los siguientes:

  • 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 ranurado tridimensional. El efecto depende del valor de border-color.
  • ridge: define un borde tridimensional en forma de cresta. El efecto depende del valor de border-color.
  • inset: define un borde tridimensional incrustado. El efecto depende del valor de border-color.
  • outset: define un borde tridimensional sobresaliente. El efecto depende del valor de border-color.
  • none: define sin borde.
  • hidden: define un borde oculto.

Demostración de border-style:

none: sin borde por defecto


dotted: define un borde de puntos


dashed: define un borde discontinuo


solid: define un borde sólido


double: define dos bordes. El ancho de los dos bordes es el mismo que el valor de border-width


groove: define un borde de ranura 3D. El efecto depende del valor de color del borde


ridge: define un borde de cresta 3D. El efecto depende del valor de color del borde


inset: define un borde 3D incrustado. El efecto depende del valor de color del borde


outset: define un borde 3D sobresaliente. El efecto depende del valor de color del borde


Pruébalo »

Ancho del borde

Puede especificar el ancho del borde mediante la propiedad border-width.

Hay dos formas de especificar el ancho del borde: se puede especificar un valor de longitud, como 2px o 0.1em (unidades como px, pt, cm, em, etc.), o usar una de las 3 palabras clave: thick, medium (valor predeterminado) y thin.

Nota:CSS no define los anchos específicos de las 3 palabras clave, por lo que un usuario puede configurar thick, medium y thin como 5px, 3px y 2px respectivamente, mientras que otro usuario puede configurarlos como 3px, 2px y 1px respectivamente.

Ejemplo

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

Pruébalo »

Color del borde

La propiedad border-color se utiliza para establecer el color del borde. Los colores que se pueden establecer son:

  • name - especifica el nombre del color, como "red"
  • RGB - especifica un valor RGB, como "rgb(255,0,0)"
  • Hex - especifica un valor hexadecimal, como "#ff0000"

También puede establecer el color del borde como "transparent".

Nota:border-color por sí solo no tiene efecto; primero debe usar border-style para establecer el estilo del borde.

Ejemplo

p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

Pruébalo »

Borde: configurar cada lado por separado

En CSS, puede especificar bordes diferentes para cada lado:

Ejemplo

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

Pruébalo »

El ejemplo anterior también puede configurarse con una sola propiedad:

Ejemplo

border-style:dotted solid;

Pruébalo »

La propiedad border-style puede tener de 1 a 4 valores:

  • border-style:dotted solid double dashed;
    • El borde superior es dotted
    • El borde derecho es solid
    • El borde inferior es double
    • El borde izquierdo es dashed

  • border-style:dotted solid double;
    • El borde superior es dotted
    • Los bordes izquierdo y derecho son solid
    • El borde inferior es double

  • border-style:dotted solid;
    • Los bordes superior e inferior son dotted
    • Los bordes derecho e izquierdo son solid

  • border-style:dotted;
    • Los cuatro bordes son dotted

El ejemplo anterior usó border-style. Sin embargo, también se puede usar junto con border-width y border-color.

Borde: propiedad abreviada

El ejemplo anterior usó muchas propiedades para configurar el borde.

También puede establecer el borde en una sola propiedad.

Puede configurar en la propiedad "border":

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

Ejemplo

border:5px solid red;

Pruébalo »

Examples

Más ejemplos

Todas las propiedades de borde en una sola declaración
Este ejemplo demuestra cómo usar la propiedad abreviada para configurar todas las propiedades de los cuatro bordes en una misma declaración.

Establecer el estilo del borde inferior
Este ejemplo demuestra cómo establecer el estilo del borde inferior.

Establecer el ancho del borde izquierdo
Este ejemplo demuestra cómo establecer el ancho del borde izquierdo.

Establecer el color de los cuatro bordes
Este ejemplo demuestra cómo establecer el color de los cuatro bordes. Se pueden establecer de uno a cuatro colores.

Establecer el color del borde derecho
Este ejemplo demuestra cómo establecer el color del borde derecho.

Establecer un borde con degradado
Este ejemplo demuestra cómo establecer un borde con degradado.

Propiedades de borde CSS

Propiedad Descripción
border Propiedad abreviada que se usa para establecer las propiedades de los cuatro lados en una sola declaración.
border-style Se utiliza para establecer el estilo de todos los bordes de un elemento, o para establecer el estilo del borde de cada lado por separado.
border-width Propiedad abreviada que se utiliza para establecer el ancho de todos los bordes de un elemento, o para establecer el ancho del borde de cada lado por separado.
border-color Propiedad abreviada que establece el color de la parte visible de todos los bordes de un elemento, o establece el color de los 4 lados por separado.
border-bottom Propiedad abreviada que se utiliza para establecer todas las propiedades del borde inferior en una sola declaración.
border-bottom-color Establece el color del borde inferior del elemento.
border-bottom-style Establece el estilo del borde inferior del elemento.
border-bottom-width Establece el ancho del borde inferior del elemento.
border-left Propiedad abreviada que se utiliza para establecer todas las propiedades del borde izquierdo en una sola declaración.
border-left-color Establece el color del borde izquierdo del elemento.
border-left-style Establece el estilo del borde izquierdo del elemento.
border-left-width Establece el ancho del borde izquierdo del elemento.
border-right Propiedad abreviada que se utiliza para establecer todas las propiedades del borde derecho en una sola declaración.
border-right-color Establece el color del borde derecho del elemento.
border-right-style Establece el estilo del borde derecho del elemento.
border-right-width Establece el ancho del borde derecho del elemento.
border-top Propiedad abreviada que se utiliza para establecer todas las propiedades del borde superior en una sola declaración.
border-top-color Establece el color del borde superior del elemento.
border-top-style Establece el estilo del borde superior del elemento.
border-top-width Establece el ancho del borde superior del elemento.
border-radius Establece bordes con esquinas redondeadas.
Otras extensiones