Open In App

How to create a 3D groove border using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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 the left and right. When the specified value is three, the first style is applied to the top, 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, 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 a border style that 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: In this example, we will use the above-explained approach.

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:


Last Updated : 09 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads