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); }