CSS: propiedad de borde

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de borde

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Perímetro Con sintaxis y ejemplos.

describir

Las propiedades del borde CSS definen el ancho, el estilo de línea y el color del borde del cuadro. Es una propiedad abreviada para configurar las propiedades CSS border-width, border-style y border-color.

sintaxis

La sintaxis de la propiedad border CSS es:

border: [border-width] border-style [border-color];

parámetro o parámetro

El ancho del borde es opcional. Es el ancho del borde del cuadro y puede ser uno de los siguientes:
(Si no se proporciona el ancho del borde, el valor predeterminado es medio)

valor describir
estable valor fijo en px, em, …
div {borde: 2px;}
finamente Ancho de borde delgado, puede ser 1px o 2px dependiendo del navegador
div {borde: delgado;}
Moderar Ancho de borde medio, puede ser de 3px o 4px dependiendo del navegador
div {borde: medio;}
Grueso Ancho de borde grueso, puede ser 5px o 6px según el navegador
div {borde: grueso;}

Los estilos de borde son obligatorios. Es el estilo de línea del borde del cuadro y puede ser uno de los siguientes:
(el valor predeterminado es ninguno si no se proporciona el estilo de borde)

valor describir
no cualquiera Sin bordes (este es el valor predeterminado)
div {borde: ninguno;}
duro simple, recto, sólido
div {borde: sólido;}
embellecido serie de puntos
div { borde: discontinuo; }
linea punteada Serie de guiones
div { borde: discontinuo; }
doble Dos líneas que suman la cantidad de píxeles definidos por el ancho del borde
div {borde: doble;}
ranura efecto de grabado
div {borde: surco;}
cresta Parece que el borde está “saliendo” del aspecto 3D (frente a la ranura)
div {límites: cresta;}
ilustración Apariencia incrustada
div {borde: inserción;}
al principio Apariencia en relieve (a diferencia de la ilustración)
div {borde: inicio;}
oculto el borde está oculto
div {borde: oculto;}
heredar El elemento heredará el estilo de borde de su elemento principal
div {borde: heredar;}

El color del borde es opcional. Es el color del borde del cuadro y puede ser uno de los siguientes:
(Si no se proporciona un color de borde, el valor predeterminado es la propiedad de color CSS del elemento)

valor describir
#RRGGBB representación hexadecimal del color del borde
p {borde: #FF0000; }
RGB() Representación RGB del color del borde
p { borde: rgb (255,0,0); }
nombre El nombre del color del borde (es decir, rojo, azul, negro, blanco)
p { borde: rojo; }
transparente No muestre los bordes pero aún así ocupe espacio en la página
p { borde: transparente; }
heredar El elemento heredará el color del borde de su elemento principal
p { límites: herencia; }

notas

  • El valor del ancho del borde es opcional. Si no se proporciona, el ancho del borde será medio por defecto.
  • El valor del color del borde es opcional. Si no se proporciona, el color del borde se establecerá de forma predeterminada en la propiedad de color CSS del elemento.
  • El valor del estilo de borde es obligatorio. Si no se proporciona, el estilo de borde se establecerá de forma predeterminada en Ninguno, por lo que el borde no aparecerá.
  • Consulte también las propiedades de color de borde, estilo de borde y ancho de borde.
  • ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.

Compatibilidad del navegador

Las propiedades de borde CSS tienen soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Navegador de Internet (IE)
  • es decir, móvil
  • ópera
  • Ópera Móvil
  • Safari (WebKit)
  • Safari para móvil

ejemplo

Discutiremos la propiedad de borde a continuación, explorando ejemplos de cómo usarla en CSS junto con los valores de ancho de borde, estilo de borde y color de borde.

div { border: solid; }

En este ejemplo de borde CSS, configuramos el estilo de línea del cuadro en un color sólido.

A continuación, veremos un ejemplo de borde de CSS en el que proporcionamos valores de ancho de borde, estilo de borde y color de borde.

div { border: 1px solid black; }

En este ejemplo de borde CSS, establecemos el ancho del borde en 1 px, el estilo del borde en un color sólido y el color del borde en negro.

Podemos reescribir este ejemplo usando valores hexadecimales negros de la siguiente manera:

div { border: 1px solid #000000; }

O podríamos reescribir este ejemplo con valores rgb() negros de la siguiente manera:

div { border: 1px solid rgb(0,0,0); }