Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.masked-box {
width: 300px;
height: 200px;
background-color: lightblue;
mask-border-source: linear-gradient(to right, transparent, black);
mask-border-width: 20px;
mask-border-mode: alpha;
mask-border-outset: 5px;
mask-border-repeat: stretch;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
border-radius: 15px;
mask-type: alpha;
}The 'mask-border-width' property in CSS defines the width of the mask border around an element. This property allows you to create a visual effect by controlling how the mask border is applied, effectively allowing for creative designs and shapes by masking parts of the element's border. It is particularly useful for creating complex visual styles without using images.
.masked-border {
width: 300px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
background-color: #007BFF;
mask-border-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAAFCAIAAAwU3pVAAAAA3NCSVQICAjb4U/gAAAAJcEhZcwAACxMAAAsTAQAAAABYd2UAAAAA
AElFTkSuQmCC');
mask-border-slice: 20;
mask-border-width: 10px;
mask-border-mode: alpha;
mask-type: alpha;
}The 'mask-border-source' property in CSS is used to define an image that will be used as a mask for the border of an element. This allows for creative and complex border designs by applying an image as the border mask, enabling unique visual effects that go beyond standard solid or dashed borders.
.masked-border {
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
background-color: #3498db;
mask-border-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect width="200" height="100" fill="white"/><circle cx="100" cy="50" r="40" fill="black"/></svg>');
mask-border-slice: 20;
mask-border-width: 20px;
mask-border-outset: 0;
mask-type: alpha;
-webkit-mask-border-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><rect width="200" height="100" fill="white"/><circle cx="100" cy="50" r="40" fill="black"/></svg>');
-webkit-mask-border-slice: 20;
-webkit-mask-border-width: 20px;
-webkit-mask-border-outset: 0;
-webkit-mask-type: alpha;
}The 'mask-border-slice' property in CSS is used to define how a mask image is sliced when applied to an element's border. This property allows you to control which parts of the mask image are used, enabling more complex visual effects by adjusting the border area of an element. By combining this property with others like 'mask-border-source', you can create unique and visually appealing designs.
.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.