- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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>
To Continue Learning Please Login
Login with Google