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

HTML

<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>

CSS

.inset {  

  float: left;

  width: 200px;

  height: 150px;

  shape-outside: inset(50px);

}

Result

Browser Support

Desktop

X	X	37	62	24	10.1

Tablets / Mobile

37	37	62	24	10.3	4.0

Last updated by CSSPortal on: 1st December 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu