Article Categories

Selected Reading

The set border that looks as though it is carved into the page

Javascript Web Development Front End Scripts

The CSS border-style property with the groove value creates a border that appears carved into the page, giving it a 3D inset effect. This style is useful for creating visual depth and making elements appear recessed.

Syntax

border-style: groove;

Example

<html>
   <head>
      <title>Groove Border Example</title>
   </head>
   <body>
      <p style="border-width: 4px; border-style: none; padding: 10px; margin: 10px;">
         This paragraph has no border style applied.
      </p>
      
      <p style="border-width: 4px; border-style: groove; padding: 10px; margin: 10px;">
         This paragraph has a groove border that appears carved into the page.
      </p>
      
      <p style="border-width: 6px; border-style: groove; border-color: #666; padding: 15px; margin: 10px;">
         This paragraph shows a thicker groove border with custom color.
      </p>
   </body>
</html>

How It Works

The groove border style creates a 3D effect by using different shades of the border color:

The top and left edges appear darker (creating a shadow effect)
The bottom and right edges appear lighter (creating a highlight effect)
This combination makes the border look carved or recessed into the page

Comparison with Other Border Styles

Border Style	Appearance	3D Effect
`groove`	Carved inward	Yes - appears recessed
`ridge`	Raised outward	Yes - appears elevated
`solid`	Flat line	No
`none`	No border	No

Key Points

Requires a border width of at least 2px to see the 3D effect clearly
Works best with darker border colors for more pronounced shadows
The groove effect is automatically generated by the browser
Can be combined with other border properties like border-color and border-width

Conclusion

The border-style: groove property creates an attractive carved-in effect that adds visual depth to elements. Use it when you want to make content appear recessed into the page surface.

Samual Sam

Updated on: 2026-03-15T23:18:59+05:30

150 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next