Borders and rounded corners
Border is used to outline an element from all or selected sides.
To set the borders for an element, set the following properties on the Styles tab in the right panel in the Border section:
Border color
Enter a color value (in Hex or RGB format) or select a color with the color picker. You can also adjust the opacity from 0 to 100%.
Border width
Enter a width value in pixels px.
Border style
- Solid
- Dashed
- Dotted
No border style is used by default (None). To display the border, be sure to select one of the above styles as it won't be displayed for the None style even with the border width set.
Sides of an element with the displayed borders
You can set the borders for all or some sides of an element. By default, borders for all sides are applied.
To set the border for one or more sides, sequentially select the desired sides and set the color, width, and style of the border for each of them. You can set different color, width, and style options for different sides.
You can create amazing effects by setting different borders for the sides. For example, you can create a raised button effect by setting a wide border and changing the color of the border on the two opposite sides.
You can set an element to have rounded corners, thus changing its shape. This can be done on the Styles tab in the right panel in the Size section:
By default, rounding is applied to all corners of an element. The value can be set in pixels (px) and percentage (%). The percentage is calculated from the dimensions of an element.
By setting the corner rounding value to 50% for a square element, you make it a circle, and for a rectangular element - an ellipse.
An individual rounding value for each corner allows you to create unique shapes. To do this:
- Click on the Individual radius button
- In the section with properties, set the desired radius for each corner
