Shadow Generator
box-shadowを設計。
▢
Border Radius Generator
Design CSS border-radius visually.
preview
Corners
Shape
Unit
Radius
px
border-radius: 8px;
Elliptical mode sets horizontal and vertical radii per corner (CSS slash syntax). Full uses a large radius for pills and circular buttons.
关于Border Radius Generator
A border-radius generator lets you design corner rounding visually and copy shorthand or expanded CSS. Support linked or per-corner control, circular or elliptical radii, and px / % / rem units.
toco.tools shows a live preview on a checkerboard and offers presets (none, sm, md, lg, full, organic).
Elliptical mode emits CSS slash syntax (`10px / 20px`). Simple values stay as compact shorthand; asymmetric or elliptical radii also show expanded longhand.
使用方法
- Choose linked/custom and a unit
- Tune radii with sliders
- Preview and copy the CSS
常见问题
What is a border-radius generator?
A tool that visually builds CSS border-radius values you can copy.
What are elliptical corners?
Each corner can use different horizontal and vertical radii. In CSS that becomes slash syntax like `border-radius: 20px / 10px;`.
Are settings sent externally?
No. All processing runs in your browser.
What is the full preset for?
A large radius for pills, capsules, and circular buttons.