En CSS, la propiedad border-style se usa para establecer el estilo de línea del borde de un elemento.
La propiedad de estilo de borde puede tener uno, dos, tres o cuatro valores. Cuando el valor especificado es uno, se aplica el mismo estilo a los cuatro lados. Cuando el valor especificado es dos, el primer estilo se aplica a la parte superior e inferior y el segundo estilo se aplica a la izquierda y la derecha. Cuando el valor especificado es tres, el primer estilo se aplica en la parte superior, el segundo estilo se aplica a la izquierda y a la derecha y el tercero se aplica en la parte inferior. Cuando el valor especificado es cuatro, el primer estilo se aplica en la parte superior y el segundo estilo se aplica a la derecha, el tercero se aplica en la parte inferior y el cuarto valor se aplica a la izquierda.
Ridge: Ridge es un estilo de borde que muestra un borde con una apariencia extruida. Es lo opuesto a la ranura.`
Sintaxis:
border-style: ridge;
Enfoque: en este ejemplo, le daremos el borde estriado al encabezado h1 . Puede ver que en la sección de estilo hemos asignado un borde de valor de estilo de borde que proporcionará un borde de borde 3D al encabezado h1 .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>How to create a 3D ridge border</title>
<style type="text/css">
h1.ridge {
text-align: center;
color: green;
border-width: 20px;
border-style: ridge;
Border-color: #139207
}
</style>
</head>
<body>
<h1 style="text-align: center;color:green;">
Welcome To GeeksforGeeks</h1>
<h1 class="ridge">Ridge Border Style</h1>
<h2><strong>Note:</strong>
This effect depend on the border-color value.</h2>
</body>
</html>
Producción:
Estilo de borde de cresta
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA