CSS offset-path Property

Description

The CSS offset-path property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path can be a line, a curve, a geometrical shape, or a combination of these. The offset-path property is used in combination with the offset-distance, offset-rotate, and offset-anchor properties to control the position and orientation of the element along the path. The offset-distance property specifies how far along the path the element is positioned, the offset-rotate property specifies the rotation of the element, and the offset-anchor property specifies which point on the element is aligned with the path. The offset-path property can be used to create a variety of effects, such as animating an element along a path, positioning an element along a curved edge, or creating a complex layout.

Initial value
none
Applies to
transformable elements
Inherited
no
Computed value
as specified
Animatable
by computed value type
JavaScript syntax
object.style.offsetPath

Interactive Demo

Syntax

offset-path: none | path() | ray() | url() | <basic-shape>

Values

  • noneSpecifies that the element does not follow any offset path. The none value is equivalent to the element not having any offset transform.
  • path()Specify a path in SVG syntax.
  • ray()Specify a path with the CSS ray() function.
  • url()Specify a path by using the URL to an SVG file.
  • <basic-shape>Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon().

Example

<div class="box blueBox"></div>
<div class="box redBox"></div>
<div class="box greenBox"></div>
body {
  width: 300px;
  height: 200px;
  border-radius: 50px;
  border: dashed aqua;
  border-width: 25px;
  padding: 25px;
  margin: 50px;
}

.box {
  width: 40px;
  height: 20px;
  animation: move 8000ms infinite ease-in-out;
}

.blueBox {
  background-color: blue;
  offset-path: border-box;
  offset-distance: 5%;
}

.greenBox {
  background-color: green;
  offset-path: padding-box;
  offset-distance: 8%;
}

.redBox {
  background-color: red;
  offset-path: content-box;
  offset-distance: 12%;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
7955724515.4
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
55794315.4655

Last updated by CSSPortal on: 3rd January 2024