About this tool
Draw a square checkbox and copy the CSS.
Choose the side length and the stroke color, then toggle the checked preview. The declaration sets width, height, a two-pixel border, and either a filled or empty background. It is a visual box, not a form control with a name or value.
A real checkbox still needs an input in your HTML if you want a submitted value. This page only paints the look. It does not store a preference and it does not replace the browser’s native control.
Read the privacy line on this page before you use the result in public.
Quick steps
- Draw a square checkbox and copy the CSS.
- Choose the side length and the stroke color, then toggle the checked preview. The declaration sets width, height, a two-pixel border, and either a filled or empty background. It is a visual box, not a form control with a name or value.
- A real checkbox still needs an input in your HTML if you want a submitted value. This page only paints the look. It does not store a preference and it does not replace the browser’s native control.
Read the privacy line on this page before you use the result in public.
FAQ
Draw a square checkbox and copy the CSS.
Choose the side length and the stroke color, then toggle the checked preview. The declaration sets width, height, a two-pixel border, and either a filled or empty background. It is a visual box, not a form control with a name or value.
A real checkbox still needs an input in your HTML if you want a submitted value. This page only paints the look. It does not store a preference and it does not replace the browser’s native control.
Read the privacy line on this page before you use the result in public.