# Borders and styles

&#x20;Change **corner radius,** **border**, and **shadow** settings for different sized elements.

***

In the theme editor, click the **Borders and styles** block under **Section Studio** • **Global styles**

### Small elements

Applies to small elements such as inputs, badges, variant selectors.

<table data-header-hidden><thead><tr><th width="239.78424072265625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><mark style="color:$info;">0 - 48px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border weight</mark></td><td valign="top"><mark style="color:$info;">0 - 5px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Shadow</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark><br><mark style="color:$info;">XL</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Shadow opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr></tbody></table>

### Medium elements

Applies to medium sized elements such as cards, and media.

<table data-header-hidden><thead><tr><th width="240.12652587890625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><mark style="color:$info;">0 - 48px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border weight</mark></td><td valign="top"><mark style="color:$info;">0 - 5px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Shadow</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark><br><mark style="color:$info;">XL</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Shadow opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr></tbody></table>

### Large elements

Applies to larger elements such as content containers, product cards, blog cards, and media.

<table data-header-hidden><thead><tr><th width="240.18597412109375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><mark style="color:$info;">0 - 48px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border weight</mark></td><td valign="top"><mark style="color:$info;">0 - 5px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Border opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Shadow</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark><br><mark style="color:$info;">XL</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Shadow opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr></tbody></table>
