Difference between border ridge and groove styles in CSS - GeeksforGeeks

26 May, 2021
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:
border-bottom-style
border-left-style
border-right-style
border-top-style
/* 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.
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript