Gratuïtes i sense compte

CSS Generador de radi de frontera

Doneu forma a cada cantonada independentment, inclosos els radis el·líptics horitzontals i verticals. Previsualitza el resultat i copia CSS compacte.

Introduïu 0–2,000 px o 0–100%. Es proporcionen controls de números accessibles amb el teclat.

A dalt a l'esquerra
A dalt a la dreta
A la part inferior dreta
A baix a l'esquerra

CSS escala automàticament els radis de cantonada proporcionalment quan les seves sumes superen l'amplada o l'alçada de l'element. La vista prèvia segueix el comportament CSS del navegador.

Vista prèvia en directe

Ajusteu una cantonada per previsualitzar-ne la forma.

CSS declaració

Com puc generar valors CSS border-radius?

Trieu píxels o percentatges, ajusteu el radi horitzontal i vertical de cada cantonada i copieu la declaració border-radius generada. CSS pot normalitzar proporcionalment els radis superposats per adaptar-se a l'element.

Preguntes freqüents

Com puc generar valors CSS border-radius?

Trieu píxels o percentatges, ajusteu el radi horitzontal i vertical de cada cantonada i copieu la declaració border-radius generada. CSS pot normalitzar proporcionalment els radis superposats per adaptar-se a l'element.

S'ha penjat el meu CSS o el meu disseny?

No. La previsualització i CSS es generen en aquesta pestanya del navegador. No hi ha càrrega, compte, trucada a l'API ni desament automàtic.

Cada cantonada pot tenir un radi diferent?

Sí. Establiu un valor horitzontal i vertical separat per a les cantonades superior esquerra, superior dreta, inferior dreta i inferior esquerra.

Què significa la barra inclinada a border-radius?

Separa els radis horitzontals dels radis verticals, creant cantonades el·líptiques. Si cada cantonada utilitza el mateix valor horitzontal i vertical, el generador omet la barra inclinada.

Per què la previsualització pot semblar més petita que els valors?

CSS normalitza proporcionalment els radis que es superposarien en una vora. Aquest és el comportament estàndard del navegador i també s'aplica en aquesta vista prèvia.