Skip to content
Related Articles

Related Articles

Improve Article

Difference between border ridge and groove styles in CSS

  • Last Updated : 26 May, 2021
Geek Week

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, border-left-style, where each border-style is assigned with 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. Border shadow position in ridge is from top left. It reverses the color values in a way that makes the element appear raised.



Syntax:

border-style: ridge; 

Example:

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 in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border color). 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:

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 the results we will find that in 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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :