inset() CSS Function
Description
The inset() CSS function is a CSS basic shape value that is part of the CSS Shapes module. The inset() functions defines an inset rectangle. It takes one to four offset values, which specify the offsets from the edges of the references box inward.
Syntax
inset() = inset( [offset]{1,4} [round <border-radius>]? )
Values
- offsetWhen all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.
- border-radiusdefine rounded corners for the inset rectangle using the border-radius shorthand syntax
Example
<div class="inset"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>.inset {
float: left;
width: 200px;
height: 150px;
shape-outside: inset(50px);
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| X | X | 37 | ? | 24 | 10.1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 37 | 37 | ? | 24 | 10.3 | 4.0 |