CSS Border Radius Generator

WHAT IT DOES

CSS Border Radius Generator creates custom border-radius values with a live visual preview of the resulting shape. Control each corner independently—top-left, top-right, bottom-right, and bottom-left—using pixel or percentage values. The preview updates in real time, showing exactly how the shape will look. Choose from nine preset shapes: Square, Circle, Pill, Rounded, Squircle, Top, Bottom, Left, and Right. Copy the generated CSS code to your clipboard with one click. The tool supports CSS, SCSS, and Less output formats, and includes an optional -webkit- prefix for cross-browser compatibility.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All border-radius generation, preview rendering, and code formatting occur on your machine without any network requests. No shape data, generated code, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. Border-radius generation uses standard CSS syntax.

HOW TO USE

Click the extension toolbar icon to open the CSS Border Radius Generator panel. Adjust each corner individually using the number inputs for Top-Left, Top-Right, Bottom-Right, and Bottom-Left. Select the unit type (Pixels or Percent) from the dropdown. A live preview shows the shape with the current border-radius values. The output area displays the generated CSS code. Click "Copy" to copy the code to your clipboard. Click a preset button (Square, Circle, Pill, Rounded, Squircle, Top, Bottom, Left, Right) to load a pre-configured shape. Toggle "Show preview" to show or hide the visual preview. Toggle "Include -webkit- prefix" to add vendor prefix for older browsers. Select the output format (CSS, SCSS, or Less) to match your workflow. The tool updates automatically when you change any value.

THE BORDER RADIUS GENERATION ENGINE — WHY IT WORKS

Most border-radius tools use simple single-value inputs or limited sliders. This tool provides individual corner controls with a smart generation engine that optimizes the CSS output. The engine checks all four corner values to determine the most concise syntax: if all four corners are equal, it outputs a single value (e.g., "10px"); if top/bottom pairs match, it outputs two values; if opposite corners match, it outputs two values; otherwise, it outputs all four values in clockwise order (top-left, top-right, bottom-right, bottom-left). The preview is rendered using the CSS border-radius property applied to a div, giving you an accurate visual representation. The preset system loads pre-configured corner values for common shapes. The output formatter supports CSS, SCSS, and Less variable syntax. This approach ensures you get clean, valid code every time.

THE PANEL

The CSS Border Radius Generator panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the input controls, preview, and output area adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to generate border-radius values in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. The tool generates border-radius code but does not modify your website automatically—you must copy and paste the code into your stylesheet. Very large values (9999px) create circular or pill shapes. The preview uses a fixed-size div; the actual appearance may vary depending on the element dimensions. All border-radius data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.