Border

Overview

You can style the border of an element to complement your brand and business needs. You can change the entire border or each separate side.

How to Video

  • 0:03 Introduction on how to design a text element with multiple borders.
  • 0:10 Find your text elements easily by navigating your arrow.
  • 0:25 Add a separate border option.
  • 0:43 We show you how simple it is to modify the border around the text.
  • 1:12 Change the width of the text.
  • 1:25 Style and customize the border around the text as you wish.
  • 1:51 You can add a single or double border – even change the color of the border.
  • 2:00 Conclusion.

How to Guide

Use the border options to customize elements in web projects.

Border styling
Border styling
#OptionFunctionAvailable in Project or Element
1Color selectorChoose the color display of the border by selecting the color palette.
2WeightThis option allows you to adjust the weight of the element’s border.
3Radius field and sliderAdjust the radius of the border by changing the value in the field or dragging the slider.
4Radius differentiation per cornerChange the radius of a corner.
5Border style selectorUse this option to select one of the styles: solid line, dashed, dotted or double line.
6Separate border checkboxClick the checkbox to style each side separately. You can change the color (1), weight (2), and style (5) of the sides.
Border styling
Border styling

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.
Color and weight
Color and weight
  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.
  1. Click the Advanced option.
  2. Add different values for the radius corners to change the button’s border.
  3. Click the dash icon to change the style of the border.
Radius corners
Radius corners
  1. Click the Separate border checkbox to configure separate borders for the element.
  2. Use the Color selector to change the color of a separate border.
  3. Use the Weight field to change the width of the separate border.
  4. Use the Style selector to change the style of the separate border.
Separate borders
Separate borders

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

Other element
Other element

Hidden Title

Need more help?