<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Background Clipping</title> <style> .box { width: 255px; height: 140px; padding: 15px; border: 7px dashed purple; background: orange; } .clip1 { background-clip: border-box; } .clip2 { background-clip: padding-box; } .clip3 { background-clip: content-box; } </style> </head> <body> <h2>Default Background </h2> <div class="box"></div> <h2>Background Clipping border-box</h2> <div class="box clip1"></div> <h2>Background Clipping padding-box</h2> <div class="box clip2"></div> <h2>Background Clipping content-box</h2> <div class="box clip3"></div> </body> </html>