Giá trị border-box trong CSS

Sử dụng thuộc tính CSS background-origin để đặt giá trị border-box. Với giá trị border-box, hình ảnh nền bắt đầu từ góc trên bên trái của viền.

Ví dụ

Bạn có thể chạy mã sau để triển khai giá trị border-box:

<!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>Giá trị padding-box</h1>
    <div id="value1">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. <h3>Tiêu đề 3</h3> Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</p>
    </div>
    <h1>Giá trị border-box</h1>
    <div id="value2">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.          <h3>Tiêu đề 3</h3>             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo.          </p>
    </div>
    <h1>Giá trị content-box</h1>
    <div id="value3">
      <h2>Tiêu đề 2</h2>
      <p>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.          <h3>Tiêu đề 3</h3>             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.             Đây là văn bản demo.          </p>
    </div>
  </body>
</html>