Difference between border ridge and groove styles in CSS

CSSWeb DevelopmentFront End Technology

CSS (Cascading Style Sheets) is a stylesheet language which enables the developers to style and format the HTML or XML elements in a web page. It makes our web page more attractive and user-friendly. Here, we will see a lot more about CSS borders and its different styles. While designing a web page, you may need to add borders to the elements which can be used to give aesthetic effects to it.

Groove and ridge are different styles of the border applied to an element. Both of them are slightly different from each other. So, many users can’t differentiate between the two. In this article, we will understand the difference between the ridge and groove styles in CSS.

CSS Borders

The CSS border property allows you to add border to all the four sides of an element. It specifies the style, width and color of your element’s border. If only one value is specified for the border, it applies the same for all the four sides. While if four values are specified, it applies to top, right, bottom and left (clockwise direction). However, it is a shorthand property for border-top, border-right, border-bottom and border-left.

Example

<!DOCTYPE html> <html> <head> <title> CSS Borders </title> <style> section{ margin: 10px; padding: 50px 10px 15px 5px; } .box1{ border: 1px solid; margin: 10px; } .box2{ border-left: 3px solid; border-top: 3px solid; margin: 10px; } .box3{ border: 2px solid blue; border-radius: 5%; margin: 10px; } </style> </head> <body> <section> <div class= "box1"> Borders of 1px on all sides </div> <div class= "box2"> Borders on left and top side of 3px. </div> <div class= "box3"> Rounded borders of blue color. </div> </section> </body> </html>

CSS border-style property

The border-style property of CSS enables the developers to specify the kind of border to be used.

Syntax

border-style: value;

Values − This property has the following values

  • Dotted
  • Dashed
  • Groove
  • Ridge
  • Double
  • Solid
  • None
  • Hidden
  • Inset
  • Outset

Amongst all of them, ridge, groove, inset and outset are used to give 3D effects to an element.

Ridge and groove style

Both of them are used to give 3D effect to an element. So, they are somewhat similar. The effect of these two highly depends on the color of the border. However, the major difference lies on the effect.

Ridge style gives an effect to an element such that the border appears to be coming out or protruding from the canvas while, Groove style is exactly its opposite, the border seems to be carved into the canvas. The border shadow in the ridge style is from top-left while in the groove style it is from bottom-right.

You can understand it using the coordinate system. Ridge style borders appear to be present in positive Z-axis (direction is according to the convention) while groove style borders appear to be present in negative Z-axis.

For getting a clear picture, let’s see a few examples.

Example

Groove style borders

<!DOCTYPE html> <html> <head> <title> Groove Style Borders </title> <style> h1{ margin: 30px; padding: 0; font-weiht: 700; text-decoration: underline; color: #ffd700; } section{ margin: 10px; padding: 15px 20px 20px 5px; } .box1{ border: 20px groove red; margin: 10px; width: 60%; text-align: center; background-color: #fffacd; font-size: 30px; } .box2{ border-left: 20px groove #FF69B4; border-top: 20px groove #FF1493; border-bottom: 15px solid black; border-right: 15px solid black; margin: 10px; width: 60%; text-align: center; font-size: 25px; color: #8b008b; } .box3{ padding: 30px 24px; background-color: #E6E6FA; border-left: 15px groove #663399; border-right: 15px groove #663399; width: 60%; height: 50px; border-radius:50%; margin: 10px; text-align: center; font-size: 25px; } </style> </head> <body> <h1> Groove Style Borders </h1> <section> <div class= "box1"> Groove Borders of 20px on all sides </div> <div class= "box2"> Groove Borders on left and top side while solid borders on right and bottom sides. </div> <div class= "box3"> Rounded borders with groove effect on the left and right corners. </div> </section> </body> </html>

Groove style is used to give different 3D effects to the 3 elements by changing the border-radius or color of the border.

Example

Ridge style borders

<!DOCTYPE html> <html> <head> <title> Ridge Style Borders </title> <style> h1{ margin: 30px; padding: 0; font-weiht: 700; text-decoration: underline; color: yellow; } body{ background-color: #2f4f4f; } section{ margin: 10px; padding: 15px 20px 20px 5px; } .box1{ border: 20px ridge; margin: 10px; width: 60%; text-align: center; background-color: black; font-size: 30px; color: white; } .box2{ border-left: 20px ridge red; border-top: 20px ridge red; border-bottom: 15px solid red; border-right: 15px solid red; margin: 10px; width: 60%; text-align: center; font-size: 25px; color: #ffefd5; background-color: #66cdaa; } .box3{ padding: 30px 24px; background-color: #E6E6FA; border-left: 20px ridge orange; border-bottom: 15px ridge orange; width: 60%; height: 30px; border-radius: 50%; margin: 10px; text-align: center; font-size: 20px; } </style> </head> <body> <h1> Ridge Style Borders </h1> <section> <div class= "box1"> Ridge Borders of 20px on all sides </div> <div class= "box2"> Ridge Borders on left and top side while solid borders on right and bottom sides. </div> <div class= "box3"> Rounded borders with ridge effect on the left and bottom corners. </div> </section> </body> </html>

Ridge style is used to give different 3D effects to the 3 elements by changing the border-radius or color of the border.

Conclusion

Defining the border-style property of an element is important if you want to add a border. If you don’t specify the style, no border will be applied even if width and color is specified. Using the groove and ridge styles gives 3D effects to any element.

raja
Updated on 11-Oct-2022 14:41:25

Advertisements