Gränsradiegenerator

En gräns-radie-deklaration kan ta upp till fyra oberoende hörnvärden plus en valfri åtta-värdes snedstrecksyntax för organiska kurvor - fler rörliga delar än de flesta inser tills de behöver något utöver ett enkelt rundat kort. Denna generator sätter alla dessa delar på skärmen: fyra hörnreglage med sin egen px-eller-procentenhet, en länk-alla-hörn-genväg 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 som människor faktiskt sträcker sig efter: länka varje hörn till ett skjutreglage för perfekta cirklar, piller och squircles, eller koppla bort dem för att bara runda toppen av en rullgardinspanel eller bara en sida av ett kort. En schackbrädeförhandsvisning bakom formen, som kan växlas mellan en ljus och mörk bakgrund, gör det uppenbart exakt vilka hörn som klipps bort vid vilken radie som helst - samma visuella trickfilverktyg på den här webbplatsen använder för att visa transparens.

Blob-läget är den andra halvan: snedstrecksyntaxen med åtta värden i CSS låter de horisontella och vertikala radierna i varje hörn inte överensstämma, vilket är det som förvandlar en rundad rektangel till en organisk, oregelbunden kontur. Tryck på Randomize för en ny form när som helst och kopiera den exakta CSS som ligger 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 iOS-liknande squircle och en färdig organisk klump.

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