CSS clip-path Property

Description

The clip-path property creates a limited area that determines which part of the element should be visible. Those parts that are inside the area are visible, while parts outside the area are hidden. A cropped area is a path defined either as an internal link, or as an external SVG, or as a shape, such as a circle ( circle() ).
The clip-path property has replaced the deprecated clip property.

Initial value
none
Applies to
All elements
Inherited
No
Media
Visual
Computed value
As specified, but with <url> values made absolute
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.clipPath

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
1012553.5429.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
55554429.16.0