6XC

Generatore di Bordi CSS

Progetta un bordo visivamente — spessore, stile (solid, dashed, dotted, double…), colore e raggio — con anteprima dal vivo.

674 visualizzazioni

La proprietà border

Forma abbreviata: border: spessore stile colore, ad esempio border: 2px dashed #5b3df5. Gli stili includono solid, dashed, dotted, double, groove, ridge, inset e outset. Combina con border-radius per cornici arrotondate, oppure applica lo stile a un solo lato (border-top, …) per dettagli come la sottolineatura di una scheda.

Domande Frequenti

Perché il mio bordo cambia la dimensione dell'elemento?

Per impostazione predefinita i bordi si aggiungono alle dimensioni del box. Imposta box-sizing: border-box così larghezza e altezza includono il bordo — lo standard moderno adottato dalla maggior parte dei reset.

Quanto deve essere spesso un bordo perché lo stile double sia visibile?

Lo stile double richiede almeno 3px — due linee più lo spazio tra loro. Al di sotto viene disegnato come una singola linea.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera