Mojtaba Seyedi

The mask-border CSS property sets a border image to an element’s masked border area. It is s shorthand for setting the mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode properties in a single declaration.

The overscroll-behavior CSS property controls whether an element will use “scroll chaining” or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of …

The outline-color CSS property specifies the color of an element’s outline. What’s an outline? An outline is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that …

The outline-style CSS property specifies the style of an element’s outline. What’s an outline? An outline is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that …

The outline-width CSS property specifies the thickness of an element’s outline. What’s an outline? An outline is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that …

The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog> or any element that enters fullscreen mode using the Fullscreen API.

dialog::backdrop {
  background-color: darkorange;
}

The backdrop is selectable…

The :fullscreen CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know those times you allow an image or some other element to take up the full screen? Well, we can style …

The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer.

.element {
  mask: 

…

The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it.

.element {
  mask-composite: subtract;
}

When there are multiple mask layer images, they need to be composited into one final mask layer. mask-compositespecifies how …

The mask-type CSS property indicates whether the SVG <mask> element is treated as an alpha mask or a luminance mask.

mask {
  mask-type: alpha;
}

When the mask layer is an image or a gradient, a mask-mode property can be …