如何使用 CSS 创建 3D 凹槽边框？

在 CSS 中， border-style属性用于设置元素边框的线条样式。

边框样式属性可能有一个、两个、三个或四个值。当指定值为 1 时，相同的样式应用于所有四个边。当指定值为二时，第一个样式应用于顶部和底部，第二个样式应用于左侧和右侧。当指定值为 3 时，第一个样式应用于顶部，第二个样式应用于左侧和右侧，第三个样式应用于底部。当指定值为 4 时，第一个样式应用于顶部，第二个样式应用于右侧，第三个样式应用于底部，第四个值应用于左侧。

Groove： Groove 是边框样式，显示具有挤压外观的边框。它与山脊相反。

在本文中，我们将看到如何使用 CSS 创建 3D 凹槽边框。我们可以使用以下语法为元素分配 3D 凹槽边框。

句法：

border-style: groove;

方法：在这个例子中，我们将凹槽边框赋予标题h1 。您可以看到，在样式部分，我们分配了一个边框样式值凹槽，它将为标题 h1 提供 3D 凹槽边框。

例子：

HTML

  

    
    

  

    

        Welcome To GeeksforGeeks
    
    
Groove Border Style
    
Note-:
        This effect depend on the border-color value.

  

输出：