

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS border-box Value
Use the CSS background-origin property to set the border-box value. With the border-box value, the background image begins from the upper left corner of the border.
You can try to run the following code to implement the border-box value:
Example
<!DOCTYPE html> <html> <head> <style> #value1 { border: 3px solid blue; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: padding-box; } #value2 { border: 3px solid orange; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: border-box; } #value3 { border: 3px dashed yellow; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: content-box; } </style> </head> <body> <h1>padding-box value</h1> <div id = "value1"> <h2>Heading 2</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. <h3>Heading 3</h3> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p> </div> <h1>border-box value</h1> <div id = "value2"> <h2>Heading 2</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. <h3>Heading 3</h3> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </div> <h1>content-box value</h1> <div id = "value3"> <h2>Heading 2</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. <h3>Heading 3</h3> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </div> </body> </html>
- Related Questions & Answers
- CSS padding-box Value
- CSS content-box Value
- CSS Box Shadow
- CSS Border Properties
- CSS Box Sizing Property
- Understanding CSS Box Model
- CSS border-radius property
- CSS border-image property
- CSS border-image-slice
- CSS border-image-source
- CSS border-image-width
- CSS border-image-repeat
- Animate CSS border property
- Difference between CSS border-collapse:collapse; and border-collapse:separate;
- Define the CSS Box Model
Advertisements