CSS clip-path Property

Description

The clip-path CSS property is used to define a clipping region for an element, effectively masking or cutting out portions of its content. It allows you to create complex shapes, custom borders, and interesting visual effects by specifying a path or geometric shape as the clipping area. This can be done using various values like basic shapes (e.g., circle, ellipse, polygon), SVG paths, or even the inset() function to define rectangular or inset shapes. clip-path is particularly useful for achieving unique designs and layouts on web elements, enabling creative and visually engaging user interfaces.

Initial value

none

Applies to

All elements

Inherited

No

Computed value

As specified, but with <url> values made absolute

Animatable

Yes

JavaScript syntax

object.style.clipPath

Interactive Demo

clip-path: none;

clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

clip-path: ellipse(25% 40% at 50% 50%);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

View Code

Syntax

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

/* where */
<clip-source> = <url> /* URL references an SVG <clipPath> element  */

/* and */
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

Values

• <clip-source>A <url> referencing an SVG <clipPath> element.
• <basic-shape>The size and position of the area is determined by the value of . If geometry is not defined, the border-box will be used as a block.
• <geometry-box>If defined in combination with <basic-shape>, this value defines the block for the base area. If set independently, defines the boundaries of the block, including the formation of angles (such as border-radius ). Geometry can be determined using one of the following values:
  • fill-box - Uses the boundaries of the object as the base area.
  • stroke-box - Uses stroke bounding box as the base area.
  • view-box - Uses the nearest SVG viewport as a base unit. If the viewBox defined for the element creating the SVG viewport, the base unit is positioned in the original coordinate system set by the viewBox attribute and the width and height of the base unit are set to the values ​​of the viewBox attribute.
  • margin-box - Uses margin box as a base unit.
  • border-box - Uses a border box as a base unit.
  • padding-box - Uses a padding box as a base unit.
  • content-box - Uses the content box as the base unit.
• noneCropped area is not created.

Example

<div class="container">

  <img src="images/sunset.jpg" alt="Sunset">

</div>

img {
   -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Browser Support

The following table will show you the current browser support for the CSS clip-path property.

Desktop
79	55	3.5	42	9.1

Tablets / Mobile
55	4	42	9.3	6	55

Last updated by CSSPortal on: 1st January 2024