Blog

Cross-Browser Masks

shutterstock_234378844
BLOG / Web Development

Cross-Browser Masks

Masks is the method of displaying part of an element, using a selected image as a mask.

Browser Support

Sadly this feature is currently not supported by any browser.

Code Example

You can use Masks like this:

.clip-examples {
 
  clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)
           
  clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)
  /* Looks like this is what rect() used to be like with clip */
  /* Will replace inset(), I suppose */
 
  clip-path: polygon(a, bunch, of, points)
  clip-path: circle(radius at x, y)
  clip-path: ellipse(radius-x, radius-y at x, y)
 
}

More Information

More information can be found here.