Border field has been created to allow easy creation of element border with border radius support.
General information about Borders
The gap between Border and element content can be extended with an use of Paddings. Gap between Border and other elements can be extended with an use of Margins.
Good to know: Firefox browser support only Solid border style (for rounded corners only) in connection with border Radius.
Source: www.w3schools.com
How to use Border field?
By default, Border field have 4 options to fill up. The list below will explain each of them.
- Width – an integer only field to specify width of border for all edges in pixels
- Style – select a border style from dropdown list. Available options: Solid, Dotted, Dashed, Double, Groove, Ridge. Learn more about border style here.
- Color – choose border color. This color picker supports transparency.
- Radius – Define border radius. You can use radius to make round corners. There is no need to specify other border settings to just make round corners.
What are Advanced Settings for?
Advanced Settings(1) provides more control over Border width. With this option enabled you are able to specify a width for each edge separately(2). Empty fields will not be included in output.
Video Tutorial
Please check the video tutorial showed below for better reference.