AIMRAN
HTML + CSSCheckboxes

Ring to fill checkbox

A round outline thickens inwards until it becomes a solid dot, and a small tick pops up inside.

Settings

16px
1x

Code

<label class="uv-ck2m"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Subscribe me</label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Checkboxes

See all Checkboxes

Self-drawing checkbox

CheckboxesHTML + CSS

Round fill checkbox

CheckboxesHTML + CSS

Confetti burst checkbox

CheckboxesHTML + CSS

Strikethrough task item

CheckboxesHTML + CSS

3D flip checkbox

CheckboxesHTML + CSS

Heart like button

CheckboxesHTML + CSS

Bouncy drawn checkbox

CheckboxesHTML + CSS

Circle fill checkbox

CheckboxesHTML + CSS

Where to use it

The ring closing in on itself feels soft and rounded, which fits friendly opt-ins: “Subscribe to the newsletter” at the end of a checkout, “Send me a reminder” on an event page or joining a waiting list. This round checkbox in CSS has no sharp corners at all, so it blends into playful, rounded interfaces.

Round checkboxes can be mistaken for radio buttons. Avoid mixing this one with radios in the same form, and keep the label clear so people know they can pick more than one.