CSS border-image properties have been well supported on all major browsers for a while, and they enable us to build elements that have framing and borders that would otherwise be extremely complex or downright impossible. It would be amazing if Webstudio made it easier for Designers and Developers to implement image-based borders.
The way I picture the UI/UX:
- User selects 'image' as an option in the 'Border' editor — the editor expands to show additional 'border image' options
- User selects source image, and image appears in the editor, with 4 'guide' lines (2 horizontal, 2 vertical)
- User drags the guide lines to set
border-image-slice properties — or alternatively, user can enter values (in px or %) in fields below image
- Optionally, user selects
border-image-repeat options from a dropdown menu ('stretch' is default, like CSS)
- Optionally, user can also specify a
border-image-outset value in a field.
CSS
border-imageproperties have been well supported on all major browsers for a while, and they enable us to build elements that have framing and borders that would otherwise be extremely complex or downright impossible. It would be amazing if Webstudio made it easier for Designers and Developers to implement image-based borders.The way I picture the UI/UX:
border-image-sliceproperties — or alternatively, user can enter values (in px or %) in fields below imageborder-image-repeatoptions from a dropdown menu ('stretch' is default, like CSS)border-image-outsetvalue in a field.