The difference between borderline skate and groove styles

Question

I want to know the difference between the borders of the ridge and groove . When I used them, I could not determine the difference between them. I cannot upload the image since I have not reached level 10 to make it more understandable. Here is the code:

border-style: groove ridge dashed groove; 

Answer 1

Edge Shadow Position:

Ridge: upper left


Groove: bottom right

 div { padding: 10px; margin: 10px; float: left; background-color: white; } .wrap { background-color: #ffdddd; } #ridge { border-width: 5px; border-style: ridge; margin-right: 1px; } #groove { border-width: 5px; border-style: groove; margin-left: 1px; } 

 <div class="wrap"> <div id="ridge">ridge</div> <div id="groove">groove</div> </div> 

Answer 2

The difference is defined in somewhat vague terms in the CSS 2.1 specification :

groove
A border looks like it is carved on canvas.

crest
The opposite of the “groove”: the border looks as if it comes out of the canvas.

This allows various interpretations and implementations, and the visual effect is often not so clear. It tends to be clearer if the border is relatively wide. Browsers typically use two different colors to create the impression of a declared border color and a lighter color. This should be consistent with the idea of ​​a groove or ridge border when the light comes from the direction of the upper left corner. Example:

 <style> span { border: solid red 10px } .groove { border-style: groove } .ridge { border-style: ridge } </style> <span class=groove>groove</span> <span class=ridge>ridge</span> 

Answer 3

Here are some MDN docs in css border-style

In accordance with this:

notch: displays the border leading to a sharp effect. This is the opposite of the ridge.

Answer 4

Groove is a 3D effect that creates the impression that the border is cut out on canvas. A ridge is a three-dimensional effect that has the opposite groove effect, as the border seems to protrude from the canvas.

This link gives you a clear idea:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style