- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Masking - mask-border-outset Property
The CSS property mask-border-outset specifies the distance through which the element's mask border is set away from the border box.
The mask-border-outset CSS property can be specified as one, two, three, or four values. Each value is a <length> or <number>. Negative values are not allowed and considered as invalid. Following rules are in consideration while applying the value:
If one value is specified, the same outset is applied to all four sides.
If two values are specified, the first outset is applied to the top and bottom and the second outset to the left and right sides, respectively.
If three values are specified, the first outset is applied to the top, the second outset to the left and right sides, and the third value to the bottom side, respectively.
If four values are specified, the outsets are applied to the top, right, bottom, and left sides, in the order that is specified (clockwise).
Possible values
The CSS property mask-border-outset can have one of the following values:
<length>: The mask border outset is specified as a dimension in length unit.
<number>: The mask border outset is specified as a multiple of the corresponding border-width.
Applies to
All HTML elements. And in case of SVG, it applies to the container element excluding the <defs> element and all graphics elements
Syntax
mask-border-outset = [ <length> | <number> ] {1,4}
Note: The chromium-based browsers support the old version of this property mask-box-image-outset with a prefix, i.e., -webkit.
-webkit-mask-border-outset = 3.5rem;
CSS mask-border-outset - Basic Example
The following example demonstrates the use of the CSS property mask-border-outset, where an image is passed as the mask border and an outset value is specified which adds a distance between the image and the mask border.
<html> <head> <style> * { box-sizing: border-box; } .with-mask{ -webkit-mask-box-image-source: url("images/border.png"); -webkit-mask-box-image-slice: 80; -webkit-mask-box-image-width: 120px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 3.5rem; -webkit-mask-border-source: url("images/border.png"); -webkit-mask-border-slice: 80; -webkit-mask-border-width: 120px; -webkit-mask-border-outset: 3.5rem; -webkit-mask-border-repeat: round; -webkit-mask-border-mode: alpha; } </style> </head> <body> <h1>The mask-border-outset Property</h1> <h3>With mask-border-outset</h3> <div class="with-mask"> <img src="images/scenery.jpg" alt="mask border image" width="300" height="200"> </div> </body> </html>
To Continue Learning Please Login
Login with Google