En CSS, la propiedad de estilo de borde 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.
Groove: Groove es un estilo de borde que muestra un borde con una apariencia extruida. Es lo opuesto a la cresta.
En este artículo, veremos cómo crear un borde de ranura 3D usando CSS. Podemos asignar un borde de ranura 3D a un elemento usando la siguiente sintaxis.
Sintaxis:
border-style: groove;
Enfoque: En este ejemplo, le daremos el borde acanalado al encabezado h1 . Puede ver que en la sección de estilo hemos asignado un valor de ranura de estilo de borde que proporcionará un borde de ranura 3D al encabezado h1.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>How to create a 3D groove border</title>
<style type="text/css">
h1.groove {
color: green;
text-align: center;
border-width: 20px;
border-style: groove;
Border-color: #05a100
}
</style>
</head>
<body>
<h1 style="text-align: center;color: green;">
Welcome To GeeksforGeeks
</h1>
<h1 class="groove">Groove Border Style</h1>
<h2><strong>Note-:</strong>
This effect depend on the border-color value.</h2>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA