> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Round the corners of fields and cards in Facet

> Set how rounded Facet's form fields and cards are, from square to fully rounded, and see which parts of the store each corner radius setting changes.

The **Corner radius** settings set how rounded the corners are on two families of elements: form fields and cards. One choice per family keeps the shapes consistent across every page. This page lists the options and where each one applies.

## What these settings control

* **Inputs**: text fields, dropdowns and text areas, such as search, newsletter sign-up, contact and login forms, cart notes and quantity selectors.
* **Cards**: product card pictures, collection cards, pictures in **Image** blocks and image sections, testimonial and story cards, mosaic tiles, popups and other framed panels.

Buttons have their own shape setting in [Buttons](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/buttons.md), and option boxes and swatches in [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md).

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Corner radius**

Expand **Corner radius**.

![The theme editor with Theme settings open and the Corner radius group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/corner-radius/corner-radius-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=1643f7a2345c0517a9cabf9b05dab79e)

## Corner radius settings

![Theme editor sidebar showing the Corner radius theme settings: Corner radius, Inputs, Cards.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/corner-radius/corner-radius-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=7289a1f8616be169a43d64e5c108221c)

> [accordion] Inputs
>
> * **None**: square corners.
> * **Extra small**: 4 pixels.
> * **Small**: 8 pixels.
> * **Medium** (default): 10 pixels.
> * **Large**: 12 pixels.
> * **Extra large**: 16 pixels.
> * **Pill**: fully rounded ends.

> [accordion] Cards
>
> * **None**: square corners.
> * **Extra small**: 4 pixels.
> * **Small**: 8 pixels.
> * **Medium**: 10 pixels.
> * **Large** (default): 12 pixels.
> * **Extra large**: 16 pixels.

## Best practices

* **Keep one family of shapes.** Pair **None** here with **None** buttons, or soft corners with **Soft rounded** buttons. Mixing square cards with pill buttons rarely looks intended.
* **Use Pill inputs with Rounded buttons.** A pill search field next to a pill button reads as one control.
* **Check pictures with borders.** With **Show card borders** on in [Product cards](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/product-cards.md), the card border uses the **Cards** radius too.

## Related guides

> [card] [Buttons](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/buttons.md)
>
> Set the corner style of every button.

> [card] [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md)
>
> Set the shape of option boxes and swatches.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.