El estilo de borde CSS establece el estilo de los cuatro bordes de un elemento.
Esta propiedad puede tener de uno a cuatro valores. Con un solo valor, el valor se aplicará a los cuatro bordes; de lo contrario, esto funciona como una propiedad abreviada para cada border-top-style , border-right-style , border-bottom-style , border-left-style , donde cada estilo de borde se asigna con un valor separado.
Esta propiedad es una abreviatura de las siguientes propiedades CSS:
Sintaxis:
/* Keyword values */ border-style: groove; border-style: ridge; /* top and bottom | left and right */ border-style: dotted solid; /* top | left and right | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: unset;
Estilo de borde de cresta:
Es una propiedad estilo borde de CSS. Muestra un borde con una apariencia extruida. Es lo opuesto al estilo de borde de ranura . El efecto depende del valor del color del borde. Parece como si estuviera saliendo del lienzo. La posición de la sombra del borde en la cresta es desde la parte superior izquierda . Invierte los valores de color de una manera que hace que el elemento parezca elevado.
Sintaxis:
border-style: ridge;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<style>
h1.ridge {
border-width: 20px;
border-style: ridge;
border-color: #CC63FF
}
</style>
<body>
<h1 class="ridge">Ridge border style</h1>
<p>
<strong>Note</strong>
This effect depend on the border-color value.
</p>
</body>
</html>
Producción:
Estilo de borde de ranura:
Es una propiedad estilo borde de CSS. Presenta un borde con apariencia tallada. Es lo opuesto al estilo de la cresta . El efecto depende del valor del color del borde. Parece como si estuviera tallado en el lienzo. (Esto generalmente se logra creando una «sombra» a partir de dos colores que son ligeramente más claros y más oscuros que el color del borde). La posición de la sombra del borde en la cresta es desde la parte inferior derecha . Agrega un bisel basado en el valor del color de una manera que hace que el elemento aparezca presionado en el documento.
Sintaxis:
border-style: groove;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<style>
h1.groove {
border-width: 10px;
border-style: groove;
border-color: #CC63FF
}
</style>
<body>
<h1 class="groove">Groove border style</h1>
<p>
<strong>Note</strong>
This effect depend on the border-color value.
</p>
</body>
</html>
Producción:
Conclusiones:
- Cuando observamos detenidamente ambos resultados, encontraremos que en el estilo de borde de ranura , el margen superior e izquierdo del borde interior es claro. El margen derecho e inferior del borde interior es oscuro y tiene un estilo de borde de cresta , es todo lo contrario.
- Groove es un efecto 3D que da la impresión de que el borde está tallado en el lienzo. Ridge es un efecto 3D que tiene el efecto opuesto al surco, en el que el borde parece sobresalir del lienzo.
Publicación traducida automáticamente
Artículo escrito por bilzabelzion y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA