# How to style a rounded bullet-like checkbox for options buttons

<figure><img src="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FUYRdAFPxfGscyxbuGP6p%2FUntitled.png?alt=media&#x26;token=9efc501e-6a9f-4efe-93ec-2cb44a9ee09e" alt=""><figcaption></figcaption></figure>

{% embed url="<https://firebasestorage.googleapis.com/v0/b/savvy-flow-uploads/o/oNrQLV6ZiVBavUmAkfcu%2FHow%20to%20style%20a%20rounded%20bullet-like%20checkbox_20949415811219896.mp4?alt=media&token=3835f655-9463-456b-b4f6-ea1dbc342829>" %}

#### Select the checkbox element for styling:

1. In the “**Edit”** sub-menu open the “**Designer”** card.
2. Select the Options buttons component you want to style.
3. Click "**+ Sub-Elements**".
4. Change the “**Element**” you want to style from “**whole thing**” to “**Checkbox**”.

#### Add styles to the checkbox:

1. In the “**Border**” tab:

   a.   Give a value to the border property e.g. <mark style="color:red;">`1px solid black`</mark>

   b.   Set a border radius e.g. <mark style="color:red;">`25px`</mark>
2. In the “**Size**” tab, give the checkbox a matching width and height e.g. <mark style="color:red;">`25px`</mark>

#### Create and style the inner circle:

1. In the “**Font**” tab (the tick is styled as a font), set the <mark style="color:red;">`font-size`</mark> to <mark style="color:red;">`0px`</mark> or <mark style="color:red;">`color:`</mark>` ``transparent` to make it not visible.
2. Click “**+ Filter**” to be able to filter by selected state styling. Change the "When" option to “Selected” to style the checkbox selected state.
3. In the “**Background**” tab, give the checkbox a background color.
4. In the “**Border**” tab, set an inner box shadow to separate the background color from the checkbox border e.g. <mark style="color:red;">`inset 0px 0px 0px 3.5px #fff`</mark>

That’s it! You can now play with styling to get it exactly as you want it to be!.

### Related Docs:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Styling hover, selected, disabled button states</strong></mark></td><td><a href="how-to-style-hover-selected-disabled-button-states">how-to-style-hover-selected-disabled-button-states</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2Fw8376QiBkSMZD0m9uEpV%2F2023-03-02_16h03_26.png?alt=media&#x26;token=3fdbef72-a031-4ac8-9b6e-5e163b8fc2d1">2023-03-02_16h03_26.png</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>How to add a “Deselect All” button in a Multi-Select</strong></mark></td><td><a href="../logic-how-tos/how-to-add-a-deselect-all-button-in-a-multi-select">how-to-add-a-deselect-all-button-in-a-multi-select</a></td><td><a href="https://2080030610-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgFafh00YOojEhbybq4uG%2Fuploads%2FZtshQFBE2fX6cY5pWCqD%2F2023-03-02_16h08_07.png?alt=media&#x26;token=acfdeb34-c991-49bf-9c6b-5986f4da8b26">2023-03-02_16h08_07.png</a></td></tr><tr><td align="center"></td><td></td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trysavvy.com/how-tos/design-how-tos/how-to-style-a-rounded-bullet-like-checkbox-for-options-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.