Taildev

bg-clip-border

Clip the background to the border box. The background extends to the outer edge of the border, including the border area itself.

Quick Reference

ClassProperties
bg-clip-borderbackground-clip: border-box;

Interactive Demo

bg-clip-border

Background extends to border edge

The gradient fills the entire area including the border

HTML Code

<div class="bg-clip-border p-8 bg-gradient-to-r from-blue-500 to-purple-500 border-8 border-dashed border-blue-300">
  <div class="bg-black/20 backdrop-blur-sm rounded-lg p-6">
    <p>Background extends to border edge</p>
  </div>
</div>

Comparison with Other Clip Values

bg-clip-border

Includes border area

bg-clip-padding

Excludes border

bg-clip-content

Content area only

Common Use Cases

🎨 Full Coverage Backgrounds

Perfect for when you want the background to extend all the way to the border edges, creating seamless color fills or gradients.

  • • Card backgrounds with borders
  • • Button designs with full coverage
  • • Container backgrounds

🖼️ Image Backgrounds

Default behavior for background images, ensuring they fill the entire element including the border area.

  • • Hero section backgrounds
  • • Card image overlays
  • • Full-width banners