# Border

**OVERVIEW**

The <mark style="color:orange;">**Border Panel**</mark> affects the edges of all four panels and  button of the widget.

<figure><img src="https://278174896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpH7f7qBXjb57cdLvfyxr%2Fuploads%2Fhw6A71GWK23AbOTUsxGS%2FScreenshot%202025-01-19%20at%201.05.59%20PM.png?alt=media&#x26;token=fd4a9895-0a4b-44fe-8536-fda3a2457a48" alt="" width="345"><figcaption><p>The orange area shows what the Border Panel affects</p></figcaption></figure>

**CUSTOM AND NONE**

If you do not wish to have borders, click <mark style="color:orange;">**None**</mark> and disregard the rest of this page.

If you would like borders, click <mark style="color:orange;">**Custom**</mark> and follow the rest of this tutorial.

<figure><img src="https://278174896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpH7f7qBXjb57cdLvfyxr%2Fuploads%2FERGZn3lkYhTlqq5zYqNs%2FScreenshot%202025-01-19%20at%201.08.07%20PM.png?alt=media&#x26;token=e796d5bd-7498-48ee-a4a3-48fcf6d5aedb" alt=""><figcaption></figcaption></figure>

**BORDER COLOR**

<mark style="color:orange;">**Border Color**</mark> affects the color of the border.

<figure><img src="https://278174896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpH7f7qBXjb57cdLvfyxr%2Fuploads%2FsWmbOGjS24dsTNXamqHg%2Fborder_color.jpg?alt=media&#x26;token=eb6c2d51-d91a-458b-aed5-5944b03c1742" alt="" width="375"><figcaption></figcaption></figure>

Like the previous <mark style="color:orange;">**Colors Panel**</mark>, you can customize colors by using the <mark style="color:orange;">**Color Selection Panel**</mark>, <mark style="color:orange;">**HEX Codes**</mark>, <mark style="color:orange;">**RGB Codes**</mark>, and <mark style="color:orange;">**Eye Dropper**</mark> selection.

<figure><img src="https://278174896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpH7f7qBXjb57cdLvfyxr%2Fuploads%2FBslUkNVEYP0SFyIH6x22%2Fcolor_selection.jpg?alt=media&#x26;token=21db8bac-7bb9-4d3c-a644-93aad53bcc76" alt=""><figcaption></figcaption></figure>

**BORDER WIDTH**

<mark style="color:orange;">**Border Width**</mark> affects the width of the border line.

<figure><img src="https://278174896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpH7f7qBXjb57cdLvfyxr%2Fuploads%2F7ict6oyM24TRIcLncDVr%2Fborder_width.jpg?alt=media&#x26;token=c7e0d781-412d-4072-b5df-1fc33be90f4c" alt="" width="375"><figcaption></figcaption></figure>

**BORDER RADIUS**

<mark style="color:orange;">**Border Radius**</mark> affects the roundness of the corners.

<figure><img src="https://278174896-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpH7f7qBXjb57cdLvfyxr%2Fuploads%2FDIftqpdWWK5KGOQx4qsk%2Fborder_radius.jpg?alt=media&#x26;token=a770982e-fbb2-4dcf-9fef-f8a6cd853267" alt="" width="375"><figcaption></figcaption></figure>

<mark style="color:orange;">**A value of 0**</mark> leaves a sharp right angle corner **∟.**

<mark style="color:orange;">**A value greater than 1**</mark> leaves a round corner ⊂. The higher the number, the more round it gets.