path() CSS Function


The CSS path() function allows you to define a custom path for an element to follow. It takes an SVG path string as its argument, and can be used in the following CSS properties:

  • offset-path: Defines a path for an element to follow when it is animated.
  • clip-path: Defines a path that is used to clip an element's content.

The path() function can be used to create a wide variety of shapes, including circles, ellipses, rectangles, polygons, and even more complex shapes. It is a powerful tool that can be used to add visual interest and interactivity to your web pages.

Here is an example of how to use the path() function to create a circle:

.circle {
  width: 100px;
  height: 100px;
  clip-path: path(circle(50px, 50px, 50px));

This CSS will create a square element with a width and height of 100px. The clip-path property will then clip the element's content to the shape of a circle with a radius of 50px.

The path() function can also be used to create more complex shapes, such as the following:

.wave {
  width: 100%;
  height: 100px;
  clip-path: path(M0 0 L50 50 L100 0 Z);

This CSS will create a wave-shaped element. The M0 0 command moves the cursor to the point (0, 0). The L50 50 command draws a line from the current cursor position to the point (50, 50). The L100 0 command draws a line from the current cursor position to the point (100, 0). The Z command closes the path.




  • <'fill-rule'>The filling rule for the interior of the path. Possible values are nonzero or evenodd. The default value is nonzero.
  • <string>The string is a data string for defining an SVG path.


<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="">
<path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
svg {
height: 100%;

/* This path is displayed on hover*/
#svg_css_ex1:hover path {
d: path("M20,80 L50,20 L80,80");

Browser Support

The following table will show you the current browser support for the CSS path() function.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 7th October 2023