Border Radius-generator

En border-radius-deklaration kan ta upp till fyra oberoende hörnvärden plus en valfri slash-syntax med åtta värden för organiska kurvor – fler rörliga delar än de flesta inser tills de behöver något utöver ett enkelt rundat kort. Den här generatorn visar varenda en av dessa delar på skärmen: fyra hörnreglage med sina egna px- eller procentenheter, en genväg för att låsa alla hörn för symmetriska former, och ett blob-läge för former som inget enskilt radievärde kan uttrycka.

Hörnläget täcker de former folk faktiskt använder: lås varje hörn till ett reglage för perfekta cirklar, pillerformer och squirclar, eller frigör dem för att bara runda toppen av en dropdown-panel eller bara en sida av ett kort. En schackrutig förhandsvisning bakom formen, som kan växlas mellan ljus och mörk bakgrund, gör det tydligt exakt vilka hörn som klipps bort vid en given radie – samma visuella knep som filverktygen på denna webbplats använder för att visa genomskinlighet.

Blob-läget är den andra halvan: CSS slash-syntax med åtta värden låter de horisontella och vertikala radierna för varje hörn skilja sig åt, vilket är vad som förvandlar en rundad rektangel till en organisk, oregelbunden kontur. Tryck på Slumpa för en ny form när som helst och kopiera den exakta CSS-koden bakom den – ingen SVG-export eller externt bibliotek inblandat. Förinställda sidor täcker de förfrågningar som folk faktiskt skriver i en sökruta: en perfekt cirkel, en stadionformad pillerknapp, en squircle i iOS-stil och en färdiggjord organisk blob.

Som alla verktyg på den här webbplatsen körs det helt i din webbläsare: ingen uppladdning, inget konto, och generatorn fortsätter att fungera offline när sidan väl har laddats.