How to create a 3D groove border using CSS?

How to create a 3D ridge border using CSS?

Last Updated : 17 May, 2023

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 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.

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: In this example, we are using the above-explained approach.

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

How to create a 3D groove border using CSS?

portalpirate

Improve

Article Tags :

Similar Reads

How to create a 3D groove border using CSS?

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

How to create and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val

How to create a 3D outset and inset border using CSS ?

In this article, we will create a 3D outset and inset border using CSS. The Inset border property makes the content appear embedded (inside the surface) and on the other hand, the outset property makes the content appear embossed (outside the surface). You can achieve this task by using the border-s

How to Create Border Animation using CSS?

Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction.

How to create a hidden border using CSS properties ?

In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil

How to Add an Iframe Border using CSS ?

This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax:<style> iframe { bord

How to Create a Ribbon using CSS?

In this article, we will learn how to create a ribbon using CSS.PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "N

How to create a Chevron using Tailwind CSS ?

A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward

How to Create Badges using HTML and CSS ?

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that

How to create a skewed background using CSS ?

A skewed background design enhances a website's visual appeal with dynamic, angled elements. By using CSS transform: skew() along with ::before and ::after pseudo-elements, you can easily create a slanted effect, adding a modern and engaging look to your site's layout.ApproachHTML Structure - Sectio