CSS Data Type - <box-edge>

CSS <box-edge> data type defines different box edges, such as content-box and border-box. Box-edge specifies how elements are positioned and displayed on the screen.

The box-edge keywords are part of data types such as <visual-box>, <layout-box>, <paint-box>, <coord-box>, and <geometry-box>. They are used with properties such as transform-box and background-clip.

Possible Values

<visual-box> − The rectangular box on a web page containing an element's content, padding, and border, referred to as <box>, excluding the margin area, is used for background-clip and overflow-clip-margin.
<layout-box> − It defines the total area occupied by an element includes content, padding, border and margin.
<paint-box> − It defines the area inside the layout box where content is visually displayed, which includes the painting of the element's background and borders.
<coord-box> − It describes the coordinate box that positions and sizes an element inside its parent container. This value controls content flow around the edges of the box.
<geometry-box> − Sets the reference box for a basic shape or, when used alone, sets the clipping path to include the edges of the specified box with corner shaping (such as a border-radius).

Syntax

<visual-box> = content-box | padding-box | border-box;
<layout-box> = <box> | margin-box; 
<paint-box> = <box> | fill-box | stroke-box;
<coord-box> = <box> | fill-box | stroke-box | view-box;
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box;

The following table shows different keywords related to <box-edge> data type −

Keywords	Description
content-box	The content box is the innermost part of a box that contains text, images, or HTML elements. In SVG it is same as "fill-box".
padding-box	The padding around the outside of a box is referred to as the padding-box. In SVG it is same as "content-box". If a box has no padding, it is similar to "content-box".
border-box	Outer edge of the border of a box is referred as border-box. In SVG it is same as "stroke-box".
margin-box	Outer edge of the margin of a box is termed as margin-box. In SVG it is same as "stroke-box".
fill-box	Fill-box behaves similarly to content-box in CSS, wrapping content around coord-box boundaries. In SVG, it's the object's bounding box.
stroke-box	In SVG, stroke-box refers to the stroke bounding box. In CSS, it behaves similarly to a border-box, determining the element's shape when strokes are added.
view-box	It refers to the origin box of the nearest SVG viewport, which is a rectangle with dimensions determined by the viewBox attribute. This rectangle is positioned in its top left corner at the coordinate system origin. In CSS, the view-box behaves like border-box

CSS <box-edge> - <visual-box>

The following example demonstrates the use of <visual-box> with the background-clip property to display the effect of various values, including border-box, padding-box, and content-box −

<html>
<head>
<style>  
   p {
      border: 10px red;
      border-style: dashed double;
      margin: 10px;
      padding: 20px;
      background: lightblue;
   }
   .border-area {
      background-clip: border-box;
   }
   .padding-area {
      background-clip: padding-box;
   }
   .content-area {
      background-clip: content-box;
   }
</style>
</head>
<body>
   <p class="border-area">Border Box</p>
   <p class="padding-area">Padding Box</p>
   <p class="content-area">Content Box</p>
</body>
</html>

CSS <box-edge> - <layout-box>

The following example demonstrates the use of <layout-box> with the shape-outside: content-box property, defining that content should wrap around the element's content box −

<html>
<head>
<style>
   .box-shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: lightblue;
      border: 8px red;
      border-style: dashed double;
      padding: 20px;
      text-align: center;
      background-clip: content-box;
      shape-outside: content-box;
      margin: 10px; 
   }
</style>
</head>
<body>
   <div class="box-shape">content box</div>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
      </p>
</body>
</html>

CSS <box-edge> - <paint-box>

The following example demonstrates the use of <paint-box> with the mask-clip property for the fill-box and stroke-box values −

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      mask-image: url(images/book.png);
      mask-size: 100% 100%; 
   }
   .mask-fill {
      -webkit-mask-clip: fill-box;
      mask-clip: fill-box;
   }
   .mask-stroke {
      -webkit-mask-clip: stroke-box;
      mask-clip: stroke-box; 
   }
</style>
</head>
<body>
   <h3><paint-box> for fill-box</h3>
   <div class="mask-fill">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
   <h3><paint-box> for stroke-box</h3>
   <div class="mask-stroke">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS <box-edge> - <coord-box>

The following example demonstrates the use of <coord-box> with the offset-path property for the fill-box and stroke-box values −

<html>
<head>
<style>
   .container {
      width: 300px;
      height: 200px;
      border: dashed lightgreen;
      border-width: 25px;
      padding: 25px;
      margin: 40px;
   }
   .box {
      width: 40px;
      height: 20px;
      animation: move 8000ms infinite ease-in-out;
   }
   .violet-border {
      background-color: violet;
      offset-path: fill-box;
      offset-distance: 5%;
   }
   .yellow-border {
      background-color: yellow;
      offset-path: stroke-box;
      offset-distance: 10%;
   }
   @keyframes move {
      0%,
      30% {
         offset-distance: 0%;
      }
      70%,
      100% {
         offset-distance: 100%;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box violet-border"></div>
      <div class="box yellow-border"></div>   
   </div>
</body>
</html>

CSS <box-edge> - <geometry-box>

The following example demonstrates the use of <geometry-box> with the clip-path property for the <basic-shape> values such as, circle, ellipse, inset, polygon, path −

<html>
<head>
<style>
   .image-container {
      display: flex;
   }
   .clip-inset {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%);
   }
   .clip-circle {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: circle(50%);
   }
   .clip-ellipse {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: ellipse(100px 50px at 100px 100px);
   }
   .clip-ploygon {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   }
   .clip-path {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path:  path('M 100 100 L 0, 50 L 150,50 z');
   }
</style>
</head>
<body>
   <div class="image-container">
      <h3>Inset</h3>
      <img src="images/pink-flower.jpg" class="clip-inset">
   </div>
   <div class="image-container">
      <h3>Circle</h3>
      <img src="images/pink-flower.jpg" class="clip-circle">
   </div>
   <div class="image-container">
      <h3>Ellipse</h3>
      <img src="images/pink-flower.jpg" class="clip-ellipse">
   </div>
   <div class="image-container">
      <h3>Ploygon</h3>
      <img src="images/pink-flower.jpg" class="clip-ploygon"> 
   </div>
   <div class="image-container">
      <h3>Path</h3>
      <img src="images/pink-flower.jpg" class="clip-path">
   </div>
</body>
</html>