> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Styles tab in Editor

# Getting Started

You will find the Styles tab in almost every setting in your builder. This article will cover all the settings inside the Styles tab. Here is the list of settings you will find inside the styles tab:

* Margin and Padding
* Border
* Radius/Rounded Corner
* Box Shadow
* Transform

# Margin and Padding

The margin and padding option let you change and tinker with the margin and padding of any row, section, column, or element.

Here is what it looks like:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1ed8crs.png)

---

You can change the values in %

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at21206p_x1s17i.gif)

Or in pixels or px

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at21403p_1wa5tef.gif)

## Lock Aspect 🔒

Once you activate the lock aspect option or click on the 🔒 option, it will change the values parallelly for both sides.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at21620p_xvytz.gif)

You also change the values for individual devices by hovering over the device icons

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at22024p_1tjo7na.gif)

---

# Border

The border option lets you add a border around any element, section, row, and column.

This is what the border setting looks like:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_tl9rv9.png)

The GIF below demonstrates what all the options do

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at24541p_14j8wag.gif)

---
---

# Radius/Rounded Corner

This option lets you add a rounded corner to your border.

⬇️ The GIF below demonstrates how it works.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at25522p_12td0vg.gif)

---
---
# Box Shadow

The Box shadow option lets you add a shadow around your border.

⬇️ The GIF below demonstrates how it works.

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-08-25at30628p_f4ce8q.gif)

---
---

# Transform

This option allows you to transform your element, like rotating, skewing, scale, etc.

⬇️ The GIF below demonstrates how it works.

![](https://cdn.cmsfly.com/63969cb64dabfc00be8d85e0/gif_recording_2022-08-25_at_3.10.09_pm-x2i1vI.gif)

---

**Related articles**

[Animation on Scroll](/en/article/animation-on-scroll-reo8kb/)

[How to control Z-index](/en/article/how-to-control-z-index-1p6jgm6/)