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: propiedades de estilo de borde
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada estilo de borde Con sintaxis y ejemplos.
describir
La propiedad de estilo de borde de CSS define el estilo de línea de un borde de caja.
sintaxis
Las propiedades de estilo de borde CSS se pueden representar mediante uno, dos, tres o cuatro de los valores proporcionados.
un valor
Sintaxis de CSS Propiedades de estilo de borde (con 1 valor) es:
border-style: all;Cuando se proporciona un valor, el valor del estilo de borde se aplicará a los cuatro lados del cuadro (es decir, arriba, derecha, abajo, izquierda).
dos valores
Sintaxis de CSS Propiedades de estilo de borde (con 2 valores) es:
border-style: top_bottom left_right;Cuando se proporcionan dos valores, el primer valor se aplicará a la parte superior e inferior del cuadro. El segundo valor se aplicará a los lados izquierdo y derecho del cuadro.
tres valores
Sintaxis de CSS Propiedades de estilo de borde (con 3 valores) es:
border-style: top right_left bottom;Cuando se proporcionen tres valores, el primer valor se aplicará en la parte superior del cuadro. El segundo valor se aplicará a los lados derecho e izquierdo del cuadro. El tercer valor se aplicará en la parte inferior del cuadro.
cuatro valores
Sintaxis de CSS Propiedades de estilo de borde (con 4 valores) es:
border-style: top right bottom left;Cuando se proporcionan cuatro valores, el primer valor se aplicará en la parte superior del cuadro. El segundo valor se aplicará al lado derecho del cuadro. El tercer valor se aplicará en la parte inferior del cuadro. El cuarto valor se aplicará al lado izquierdo del cuadro.
Los valores de estilo de borde superior, derecho, inferior e izquierdo pueden ser uno de los siguientes:
| valor | describir |
|---|---|
| no cualquiera | Sin bordes (este es el valor predeterminado) div {estilo de borde: ninguno;} |
| duro | simple, recto, sólido div {estilo de borde: sólido;} |
| embellecido | serie de puntos div {estilo de borde: discontinuo;} |
| linea punteada | Serie de guiones div {estilo de borde: discontinuo;} |
| doble | Dos líneas que suman la cantidad de píxeles definidos por el ancho del borde div {estilo de borde: doble;} |
| ranura | efecto de grabado div {estilo de borde: surco;} |
| cresta | Parece que el borde está “saliendo” del aspecto 3D (frente a la ranura) div {estilo de borde: cresta;} |
| ilustración | Apariencia incrustada div {estilo de borde: inserción;} |
| al principio | Apariencia en relieve (a diferencia de la ilustración) div {estilo de borde: inicio;} |
| oculto | el borde está oculto div {estilo de borde: oculto;} |
| heredar | El elemento heredará el estilo de borde de su elemento principal div {borderstyle: heredar;} |
notas
- En las propiedades de estilo de borde CSS, puede combinar diferentes valores de estilo de borde para los lados superior, derecho, inferior e izquierdo del cuadro.
- Dado que el valor predeterminado del estilo de borde CSS es ninguno, debe establecer el valor del estilo de borde CSS para mostrar el borde.
- Consulte también las propiedades border, border-color y border-width.
Compatibilidad del navegador
Las propiedades de estilo 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 estilo de borde a continuación, explorando ejemplos de cómo usar esta propiedad con un valor de 1, 2, 3 o 4 en CSS.
div { border-style: solid; }En este ejemplo de estilo de borde CSS, proporcionamos un valor sólido que se aplicará a los 4 lados del cuadro.
A continuación, veremos un estilo de borde CSS de ejemplo que proporciona dos valores.
div { border-style: dashed dotted; }En este ejemplo de estilo de borde CSS, proporcionamos dos valores. El primer valor de la línea discontinua se aplicará a la parte superior e inferior del cuadro. El segundo valor de punteado se aplicará a los lados izquierdo y derecho del cuadro.
A continuación, veremos un estilo de borde CSS de ejemplo que proporciona tres valores.
div { border-style: none solid double; }En este ejemplo de estilo de borde CSS, proporcionamos tres valores. El primer valor de ninguno se aplicará a la parte superior del cuadro. El segundo valor de sólido se aplicará a los lados derecho e izquierdo del cuadro. El tercer valor de doble se aplicará en la parte inferior de la caja.
A continuación, veremos un estilo de borde CSS de ejemplo que proporciona cuatro valores.
div { border-style: inset outset solid solid; }En este ejemplo de estilo de borde CSS, proporcionamos cuatro valores. El primer valor de inserción se aplicará a la parte superior del elemento. El segundo valor de salida se aplicará al lado derecho de la caja. El tercer valor de sólido se aplicará en la parte inferior del cuadro. El cuarto valor de sólido se aplicará al lado izquierdo del cuadro.