Border

How to Guide

Use the border options to customize elements in web projects.

#	Option	Function	Available in Project or Element
1	Color selector	Choose the color display of the border by selecting the color palette.
2	Weight	This option allows you to adjust the weight of the element’s border.
3	Radius field and slider	Adjust the radius of the border by changing the value in the field or dragging the slider.
4	Radius differentiation per corner	Change the radius of a corner.
5	Border style selector	Use this option to select one of the styles: solid line, dashed, dotted or double line.
6	Separate border checkbox	Click the checkbox to style each side separately. You can change the color (1), weight (2), and style (5) of the sides.

Real-Life Example of How to Configure Border Setting

Join us as we examine one of the many ways you can style an input element using the Border setting. Alternatively, contact us today if you have a specific business use case in mind.

Styling a Text field using Border

The example below shows how to change the border of the element.

1. Click the Input Styling icon to open the Styling panel.
2. Click the Border option to expand it.
3. Use the color selector to change the color.
4. Add a value in the weight field to change the width of the border.

1. Drag the radius slider to adjust the element’s corners. The higher the value, the rounder the corners.
2. Alternatively, type a value in the Radius field.

7. Click the Advanced option.
8. Add different values for the radius corners to change the button’s border.
9. Click the dash icon to change the style of the border.

10. Click the Separate border checkbox to configure separate borders for the element.
11. Use the Color selector to change the color of a separate border.
12. Use the Weight field to change the width of the separate border.
13. Use the Style selector to change the style of the separate border.

You can do the same for other elements, for instance, a text element: