# Element customizations

Generic element customizations, such as the size, position, border, shadow, and corner radius, can be configured from the Properties > Element > Settings tab. Let's take a look!&#x20;

### 1. Type

Use the **Type** dropdown menu to select and switch between various element types.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2Fw6f1Dfcem96myJqOONef%2Fimage.png?alt=media&#x26;token=69aa8ca7-8076-413e-9627-b22fb6a631cb" alt=""><figcaption></figcaption></figure>

### 2. Dimension

You can customize the size of each dashboard element by setting its width and height. Additionally, you can define its position using X and Y coordinates.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F37BkLE6hMKitdpyYDi3b%2Fimage.png?alt=media&#x26;token=d1eb543e-1903-4b44-ac28-6c53bd5e1c7a" alt=""><figcaption><p>Setting the dimension and position</p></figcaption></figure>

### 3. Border

Draw borders to highlight your elements. You can specify the border width and color.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FjdOBswlXXGq3bC7loOJo%2Fimage.png?alt=media&#x26;token=1f94363a-cdcb-41e2-9b32-75d0f7b84ed4" alt=""><figcaption><p>Applying borders</p></figcaption></figure>

### 4. Corner radius

The **Corner Radius** property allows you to adjust the roundness of an element’s corner. A higher value results in more rounded corners, while a value of **0** creates sharp, square corners. You can set a uniform corner radius with the **All** option or specify the radius for individual corners with the **Custom** option.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F69yL1p3obVyJVRk08cxy%2Fimage.png?alt=media&#x26;token=b0e5e642-d3e4-47bf-994c-ab12c916e031" alt=""><figcaption><p>Setting the corner radius</p></figcaption></figure>

### 5. Padding

Specify the padding between an element and the border.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FWaKuOx1YgsAn6Q6xynmG%2Fimage.png?alt=media&#x26;token=bd1e5a2b-8931-428f-9002-18a50f2dbffd" alt=""><figcaption><p>Padding</p></figcaption></figure>

### 6. Margin

Specify the distance between an element and the container.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FdbgPWxrOz6Tznjjzo1y3%2Fimage.png?alt=media&#x26;token=41e24a0f-33b5-4452-b1fa-8b5051f8f69d" alt=""><figcaption><p>Margin</p></figcaption></figure>

### 7. Fill

Select a background color for the element.&#x20;

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2F9KFqFaoW8dyMdR2o2z0E%2Fimage.png?alt=media&#x26;token=a50ccc8b-7580-4300-b8e7-fb2c7157d23f" alt=""><figcaption><p>Background color</p></figcaption></figure>

### 8. Shadow

You can demarcate each element in your dashboard and highlight them by setting a shadow. Notice how each element stands out when we assign a **Blur** and **Size** value.

<figure><img src="https://3132984990-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbOoZhPvC57Z0CNgep4Ib%2Fuploads%2FqQ0cNYmnSiBKmUKQFShp%2Fimage.png?alt=media&#x26;token=53510a2a-1761-448c-ade5-d1bd134263b5" alt=""><figcaption><p>Shadow</p></figcaption></figure>
