bg-clip-padding

Clip the background to the padding box. The background extends to the inner edge of the border, excluding the border itself.

Quick Reference

Class	Properties
`bg-clip-padding`	`background-clip: padding-box;`

Interactive Demo

bg-clip-padding

Background stops at border inner edge

Border area shows through, background doesn't extend into it

HTML Code

 <div class="bg-clip-padding p-8 bg-gradient-to-r from-green-500 to-emerald-500 border-8 border-dashed border-green-300">
   <div class="bg-black/20 backdrop-blur-sm rounded-lg p-6">
     <p>Background stops at border inner edge</p>
   </div>
 </div>

Visual Explanation

How it Works

The bg-clip-padding utility clips the background to the padding box:

✅ Background fills the content area
✅ Background fills the padding area
❌ Background does NOT fill the border area

This creates a clean separation between the background and border, useful for layered designs.

Box Model Diagram

Border Area (not filled)

Padding Area (filled)

Content Area (filled)

Common Use Cases

🎯 Bordered Cards

Create cards with distinct borders that don't interfere with the background design.

Card content with clean border separation

🖼️ Image Frames

Perfect for creating image containers with decorative borders.

Image content area