How to create and edit borders

EE Builder's Border section allows you to personalise the frame surrounding your rows, columns, and certain modules.

General

The General subsection has the following settings:

Style

Select from various border styles to enhance your design:

- Default: Inherit border style from your theme

- None: Remove border

- Solid: Classic solid border

- Dashed: Broken line border

- Dotted: Small dots border

- Double: Two parallel lines border

Color

Set the border colour using the Colour Picker.

Width

Customise border widths for each side:

Set border widths for top, right, bottom, and left sides using px units.

- Click on a Width value field to access a slider for quick adjustments.

- Enter a custom Width value manually.

- Click the Link Values icon to apply the same value to all four sides.

Radius & Shadow

The Radius & Shadow subsection has the following settings:

Radius

Set the border-radius for each side (top, right, bottom, and left) of a row, column, or module using the px CSS unit.

When you click on any of the Radius value fields, a slider appears to allow you to quickly adjust the value. You can also type a Radius value instead of using the slider. By clicking the Link Values icon, you can set all four corners to the same value.

Box Shadow

Add depth to your design with box shadows:

Customise the box shadow for rows, columns, or modules using px units.

- Colour: Choose a box shadow colour using the Colour Picker.

- X (Horizontal Offset):

- Positive values: Shadow appears on the right.

- Negative values: Shadow appears on the left.

- Y (Vertical Offset):

- Positive values: Shadow appears on the bottom.

- Negative values: Shadow appears on the top.

- Blur (Optional): Increase the blur radius for a softer shadow.

- Spread (Optional): Adjust the shadow size.

- Negative values: Decrease shadow size.

- Positive values: Increase shadow size.

Use sliders or type values to customise your box shadow.