CSS Function - inset()

The CSS function inset() defines a rectangle that is positioned at certain distances inwards from each side of the reference box. It is one of the basic form functions used to define one of the <basic-shape> data types.

Possible Values

  • <length-percentage>{1,4} - The inset() function uses four arguments to define the top, right, bottom and left offset of a rectangle inwards from the reference box. Similar to margin shorthand, this function can be used to define insets with one, two or four values.

  • <border-radius> - These are optional and defines curved corners for the inserted rectangle, according to the syntax of the border-radius shorthand.

Syntax

shape-outside: inset(top right bottom left);

CSS inset() - Basic Example

The following example demonstrates the working of inset() function with the shape-outside property.

<html>
<head>
<style>
   div {  
      float: right;
      width: 250px;
      height: 150px;
      shape-outside: inset(20px);
   }
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum.</p>
</body>
</html>

CSS inset() - With dimensions And Rounded Corners

The following example demonstrates specifying dimensions and rounding corners of inset() function.

  • The inset() function in the provided CSS creates an inset shape within an element, setting a 10% distance from its edges.

  • The round keyword inside inset() applies rounded corners to this shape.

  • Using a horizontal radius of 50% and a vertical radius of 15%, creates a rounded inset for text wrapping around the element.

<html>
<head>
<style>
div {  
float: left;
width: 250px;
height: 200px;
shape-outside: inset(10% round 50% 15%);
background: skyblue;
}
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Donec euismod, sapien vel bibendum bibendum, velit sapien bibendum sapien, vel bibendum sapien velit sed sapien. Sed euismod, sapien vel bibendum vel bibendum, velit sapien bibendum sapien, vel vel bibendum sapien velit sed sapien.</p>
</body>
</html>
Advertisements