PNLdev
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
En
English
فارسی
En
English
فارسی
Tutorial
Front-end
HTML
reference
CSS
reference
JavaScript
reference
Run
<!DOCTYPE html> <html> <head> <style> #example1 { border: 15px solid green; padding: 20px; background: lightblue; background-clip: border-box; } #example2 { border: 15px inset white; padding: 20px; background: lightblue; background-clip: padding-box; } #example3 { border: 15px outset blue; padding: 20px; background: lightblue; background-clip: content-box; } </style> </head> <body> <h2>background-clip property example</h2> <p>The corresponding property determines how far the background image should be extended.</p> <p>background-clip: border-box (this is default):</p> <div id="example1"> <p>The background extends behind the border.</p> </div> <p>background-clip: padding-box:</p> <div id="example2"> <p>The background extends to the inside edge of the border.</p> </div> <p>background-clip: content-box:</p> <div id="example3"> <p>The background extends to the edge of the content box.</p> </div> </body> </html>
