Skip to content
Related Articles

Related Articles

Improve Article

How to create a 3D ridge border using CSS?

  • Last Updated : 07 Apr, 2021

In CSS, the 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.

Ridge: Ridge is a border style that displays a border with an extruded appearance. It is the opposite of the groove.`

Syntax: 

border-style: ridge;

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

Example:

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>

Output:

Ridge border style

My Personal Notes arrow_drop_up
Recommended Articles
Page :