Nástroje pre vývojárov, po ktorých siahate každý deň, všetky na jednom mieste.

Konvertory, formátovače, hashe, validátory a malé utility, ktoré si stále znova otvárate, zostávajú pokope namiesto toho, aby sa strácali medzi kartami.

GitHub

/ Nástroje

■

/ Vyhľadávač nástrojov

109 nástrojov

/ Generátor border-radius

Jednotka

Predvoľby

Prepojiť všetky rohy

Vľavo hore: 12px

Vpravo hore: 12px

Vľavo dole: 12px

Vpravo dole: 12px

Farba náhľadu

Veľkosť náhľadu: 150px

Náhľad

CSS kód

Vlastnosti jednotlivých rohov

Tailwind trieda

/ Vybraný nástroj

■

Generátor border-radius - bezplatný generátorový nástroj

Vizuálny generátor CSS border-radius s ovládaním jednotlivých rohov

■ 01

Čo je CSS border radius?

CSS vlastnosť border-radius zaobľuje rohy vonkajšieho okraja orámovania elementu. Môžete nastaviť všetky štyri rohy na rovnakú hodnotu alebo zadať rôzne hodnoty pre každý roh na vytvorenie jedinečných tvarov.

■ 02

Ako to funguje?

Border radius je možné zadať s 1 až 4 hodnotami. Pri 1 hodnote sú všetky rohy rovnaké. Pri 2 hodnotách sa prvá aplikuje na ľavý horný/pravý dolný a druhá na pravý horný/ľavý dolný. Pri 3 hodnotách: ľavý horný, horný…

■ 03

Ukážkové prípady

Pokrýva všetky rohy rovnaké, tvar pilulky a rôzne rohy, aby ste mohli rýchlo porovnať bežné vstupy a výstupy.

/ Súvisiace nástroje

/ Kód

■

Zdrojový kód vybraného nástroja, zobrazený tu vedľa živej verzie napravo.

/ Zdrojový kód

TypeScript

typescript

// No external dependencies needed - generates CSS border-radius strings

interface BorderRadius {
  topLeft: number;
  topRight: number;
  bottomRight: number;
  bottomLeft: number;
  unit: 'px' | '%' | 'rem';
}