Borders, corners, and shadows are essential design elements that can dramatically enhance the appearance of your website.
They help define sections, emphasize content, and create a polished and professional look.
How to Access Border, Corner & Shadow Settings
To start customizing the border, corner, or shadow of an element:
Step 1: Open Element Settings:
Select the element you wish to customize by clicking on it.
Step 2: Go to Advanced Settings. Locate Shape Settings:
Scroll down to find the Shape Settings section, where you can adjust borders, corners, and shadows.
Border Settings
Borders help define the edges of an element, adding clarity and emphasis to your design.
Border Style
Choose the style of your border:
- Solid: A continuous line.
- Dashed: A border made of dashes.
- Dotted: A border made of dots.
Border Color and Thickness
Choose a color for your border and adjust its thickness using an input field to achieve the desired look.
You can also customize the thickness of each side of the border individually.
This is an example:
Corner Settings
Corners allow you to customize the shape of an element, adding visual interest to your design.
Corner Type
Select the corner shape:
- Square: Maintains sharp, angular corners.
- Round: Creates smooth, rounded edges.
- Circle: Makes the element a perfect circle (applicable to square or equal-dimension elements).
Corner Value
Fine-tune the roundness of the corners by entering a specific value in pixels (px).
Enable or disable the corner linking option to adjust the values individually for each corner.
Shadow Settings
Shadows create depth and dimension, making your design more dynamic and visually appealing.
- Angle: Adjust the shadow’s angle (360 degrees) to align with your design style.
- Color: Choose a shadow color that complements the overall theme of your design.
- Distance: Adjust how far the shadow appears from the element, creating a subtle or dramatic effect.
- Size: Define the size of the shadow for a more noticeable or understated look.
- Blur: Control the blur level of the shadow, determining whether it’s sharp or diffused for a softer appearance.
By mastering these settings, you can customize your website elements with precision, creating a professional and engaging design tailored to your brand.