> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/how-tos/design-how-tos/how-to-style-a-rounded-bullet-like-checkbox-for-options-buttons.md).
# How to style a rounded bullet-like checkbox for options buttons
{% embed url="" %}
#### 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. `1px solid black`
b. Set a border radius e.g. `25px`
2. In the “**Size**” tab, give the checkbox a matching width and height e.g. `25px`
#### Create and style the inner circle:
1. In the “**Font**” tab (the tick is styled as a font), set the `font-size` to `0px` or `color:`` ``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. `inset 0px 0px 0px 3.5px #fff`
That’s it! You can now play with styling to get it exactly as you want it to be!.
### Related Docs: