Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.masked-box { width: 300px; height: 150px; background-color: lightblue; mask-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="black"/><circle cx="5" cy="5" r="5" fill="white"/></svg>') 10 fill; mask-border-repeat: round; mask-border-slice: 10; mask-type: alpha; }The 'mask-border-repeat' property in CSS defines how the mask border image is repeated. This property allows for creating complex visual effects by controlling the repetition of the mask border image along the edges of an element. It can be set to values like 'stretch', 'repeat', 'round', or 'space' to achieve different display styles.
.masked-box {
width: 300px;
height: 200px;
background-color: lightblue;
border: 10px solid transparent;
mask-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="100%" height="100%" fill="white"/><circle cx="150" cy="100" r="80" fill="black"/></svg>');
mask-border-outset: 20px;
mask-border-repeat: stretch;
mask-border-slice: 10;
mask-border-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="100%" height="100%" fill="none" stroke="black" stroke-width="10"/></svg>');
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: darkblue;
text-align: center;
}The 'mask-border-outset' property in CSS allows you to specify the space between the edge of the mask border and the edge of the element's box. This property can create a visual effect that enhances the appearance of elements by providing a layered look. It is particularly useful for creating unique shapes or designs for elements with a mask border.
.masked-box {
width: 300px;
height: 200px;
background-color: lightblue;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="300" height="200" fill="white"/><circle cx="150" cy="100" r="80" fill="black"/></svg>');
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"><rect width="300" height="200" fill="white"/><circle cx="150" cy="100" r="80" fill="black"/></svg>');
mask-border-mode: alpha;
mask-border: transparent;
border: 10px solid transparent;
border-radius: 20px;
padding: 20px;
text-align: center;
font-size: 24px;
color: darkblue;
}The 'mask-border-mode' CSS property defines how the mask border of an element is applied. It allows you to control the rendering of the mask border by specifying whether it should stretch, repeat, or be filled. This can create interesting visual effects by altering how the border appears based on the mask image or gradient used.
.masked-border {\n width: 300px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n color: white;\n background-color: #007BFF;\n mask-border: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAF0lEQVR42mP8z8AIAWwJ9hH2gAAAABJRU5ErkJggg==') stretch;\n mask-border-mode: alpha;\n mask-border-width: 10px;\n border: 10px solid transparent;\n}The 'mask-border' property in CSS allows you to create a mask around the border of an element, enabling you to control how the border is displayed. This property can be used to apply images or gradients to the border area, providing a unique visual effect that enhances the design of web elements.
.mask-container { width: 300px; height: 150px; background-color: lightblue; position: relative; -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%); -webkit-mask-size: 200px 200px; mask-size: 200px 200px; -webkit-mask-position: center; mask-position: center; }
.masked-content { color: white; font-size: 24px; text-align: center; line-height: 150px; }The CSS 'mask' property allows you to create complex shapes and visual effects by masking parts of an element, making them transparent or visible based on a mask image or gradient. This property can be particularly useful for creating intricate designs and effects without needing additional HTML elements or images.