Difference between border ridge and groove styles

Question

I want to know the difference between border styles- ridge and groove. When i used them, i was not able to spot the difference between the two. I cannot upload the image since i have not reached level 10 to make it more clear. Here's the code:

border-style: groove ridge dashed groove;

Answer 1

It's border shadow position:

Ridge: from top left
Groove: from 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>