Open In App

Difference between border ridge and groove styles in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS border-style sets the style of an element’s four borders.

This property can have from one to four values. With only one value, the value will be applied to all four borders; otherwise, this works as a shorthand property for each of border-top-style, border-right-style, border-bottom-style, and border-left-style, where each border style is assigned a separate value.

This property is a shorthand for the following CSS properties:

Syntax:

/* Keyword values */
border-style: groove;
border-style: ridge;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

Ridge border style: It is a border-style property of CSS. It displays a border with an extruded appearance. It is the opposite of the groove border style. The effect depends on the border-color value. It appears as if it is coming out of the canvas. The border shadow position in the ridge is from the top left. It reverses the color values in a way that makes the element appear raised.

Syntax:

border-style: ridge; 

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<style>
    h1.ridge {
        border-width: 20px;
        border-style: ridge;
        border-color: #CC63FF
    }
</style>
 
<body>
    <h1 class="ridge">Ridge border style</h1>
    <p>
        <strong>Note</strong>
        This effect depend on the border-color value.
    </p>
 
</body>
</html>


Output:

Groove border-style: It is a border-style property of CSS.  It displays a border with a carved appearance. It is the opposite of the ridge style. The effect depends on the border-color value. It appears as if it is carved on the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border color). The border shadow position in ridge is from the bottom right. It adds a bevel based on the color value in a way that makes the element appear pressed into the document.

Syntax:

border-style: groove;

Example: In this example, we are using the above method.

HTML




<!DOCTYPE html>
<html>
<style>
    h1.groove {
        border-width: 10px;
        border-style: groove;
        border-color: #CC63FF
    }
</style>
 
<body>
    <h1 class="groove">Groove border style</h1>
    <p>
        <strong>Note</strong>
        This effect depend on the border-color value.
    </p>
 
</body>
</html>


Output:

Conclusions:

  • When we look carefully at both results we will find that in the groove border style, the top and left margin of the inner border is light. The right and bottom margin of the inner border is dark and in ridge border-style, it’s just the opposite.
  • Groove is a 3D effect that gives the impression that the border is carved into the canvas. Ridge is a 3D effect that has the opposite effect of groove, in which the border appears to protrude from the canvas.


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