La propiedad CSS de estilo de borde es una propiedad abreviada que establece el estilo de línea para los cuatro lados del borde de un elemento.
Nota: La propiedad de estilo de borde puede tomar de uno a cuatro valores a la vez.
Sintaxis :
border-style: value;
Valor por defecto
- ninguna
Valores de propiedad:
- ninguno : no se crea ningún borde y se deja plano.
- oculto : al igual que ninguno, no muestra ningún borde a menos que se agregue una imagen de fondo, entonces el ancho superior del borde se establecerá en 0 independientemente del valor definido por el usuario.
- dotted : una serie de puntos se muestran en una línea como borde.
- sólido : se utiliza una sola línea sólida y en negrita como borde.
- dashed : Se utiliza una serie de líneas discontinuas cuadradas como borde.
- doble : dos líneas colocadas paralelas entre sí actúan como borde.
- surco : Muestra un borde ranurado en 3D, su efecto depende del valor del color del borde.
- ridge : Muestra un borde con estrías en 3D, su efecto depende del valor del color del borde.
- recuadro : muestra un borde insertado en 3D, su efecto depende del valor del color del borde.
- outset : muestra un borde inicial en 3D, su efecto depende del valor del color del borde.
La propiedad border-style es una abreviatura de las siguientes propiedades CSS:
- Propiedad CSS border-bottom-style : Se utiliza para establecer el estilo del borde inferior de un elemento.
- Propiedad CSS border-top-style: Se utiliza para especificar el estilo del borde superior.
- Propiedad CSS border-left-style : se utiliza para establecer el estilo del borde izquierdo de un elemento.
- Propiedad CSS border-right-style: Se utiliza para cambiar la apariencia del segmento de línea derecho del borde de un elemento.
- Propiedad de estilo de bloque de borde CSS: se utiliza para establecer los valores de propiedad de estilo de borde de bloque lógico individual en un solo lugar en la hoja de estilo.
- Propiedad CSS border-inline-style: es una propiedad incorporada en CSS que se utiliza para establecer los valores de propiedad de estilo de borde en línea del bloque lógico individual en un solo lugar en la hoja de estilo.
La propiedad de estilo de borde se puede definir usando uno, dos, tres o cuatro valores, como se indica a continuación:
- Si se asigna un solo valor, establecerá el estilo para los 4 lados.
- Si se asignan dos valores, el primer estilo se establece en los lados superior e inferior y el segundo se establecerá en los lados izquierdo y derecho.
- Si se asignan tres valores, el primer estilo se establece en la parte superior, el segundo se establece a la izquierda y la derecha, el tercero se establece en la parte inferior.
- Si se asignan valores de cuatro estilos, los estilos se establecen en la parte superior, derecha, inferior e izquierda, siguiendo el orden de las agujas del reloj.
Los siguientes ejemplos ilustran el uso de la propiedad border-style.
Ejemplo 1: este ejemplo utiliza solo un valor para todos los bordes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dotted Borders</title>
<style>
.GFG {
border-style: dotted;
border-width: 6px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2> </div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo utiliza varios valores para los bordes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dotted Borders</title>
<style>
.GFG {
border-style: solid double dashed dotted;
border-width: 6px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2> </div>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con la propiedad de estilo de borde se enumeran a continuación:
- cromo 1.0
- Borde 12.0
- IE 4.0
- Firefox 1.0
- Safari 1.0
- Ópera 3.5
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA