Skip to content
Related Articles

Related Articles

Improve Article
How to create a 3D groove border using CSS?
  • Last Updated : 07 Apr, 2021

In CSS border-style property is used to set the line style of the border of an element. 

The border-style property may have one, two, three, or four values. When the specified value is one, the same style is applied to all four sides. When the specified value is two, the first style is applied to the top and bottom and the second style is applied to left and right. When the specified value is three, the first style is applied to the top, and the second style is applied to the left and right and the third one is applied to the bottom. When the specified value is four, the first style is applied to the top, and the second style is applied to the right, the third one is applied to the bottom and the fourth value is applied to the left.

Groove: Groove is border style which displays a border with an extruded appearance. It is the opposite of the ridge.

In this article, we will see how to create a 3D groove border using CSS. We can assign a 3D groove border to an element using the following syntax.

Syntax:



border-style: groove;

Approach: In this example, we will give the grooved border to the heading h1. You can see that in the style section we have assigned a border-style value groove which will provide a 3D groove border to the heading h1.

Example:

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>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :