CSS3 border-radius
Creare bordo arrotondato con CSS3

Per creare un bordo arrotondato su un elemento HTML si deve utilizzare la regola "border-radius".

Scritto da: Stefano Cassone
Pagina 1 di 1

I bordi arrotondati e smussati possono conferire alle nostre pagine web notevoli miglioramenti dal punto di vista estetico.

Ciò che fino a non molto tempo fa si doveva fare per mezzo di immagini armandosi di meticolosa precisione, oggi puo' essere realizzato utilizzando la proprietà "border-radius" cavandosela con poche righe di codice.

Questa è la sintassi della regola border-radius:

border-radius: 1-4 length|% / 1-4 length|%;

  • 1-4 significa che possiamo specificare dimensioni diverse per tutti e quattro gli angoli del nostro elemento
  • lenght o %: possiamo esprimere l'unità di misura in px o in %
  • la barra separa il bordo superiore da quello inferiore. Se omessa, bordo superiore ed inferiore hanno lo stesso raggio

Esempio 1:

In questo esempio creiamo un bordo arrotondato uniforme di 25px su un div

CSS


HTML

Esempio 2:

In questo esempio creiamo un bordo arrotondato con raggio di 30px sugli angoli superiori e 0 su quelli inferiori

CSS


HTML

Ti è piaciuto l'articolo? Ricevine altri comodamente via mail
Aspetta, non è finita qui...
Articoli consigliati

Ottenere le dimensioni di una TV

Un praticissimo wizard per avere subito un'idea di quali possano essere le dimensioni di una TV. Comodo per chi vuole conoscere le misure di una TV a partire dalla diagonale.

Speciale Prestiti Online

Quali sono le migliori offerte? Cosa bisogna sapere prima di richiedere un prestito personale? Cerchiamo di spiegare come stanno le cose ...

Speciale Conti Correnti

Quali conti online scegliere? Puri o multicanale? Abbiamo identificato le migliori condizioni offerte dalle principali banche ...

Test velocita' ADSL

Esegui gratuitamente i migliori test per monitorare la velocità della tua connessione ADSL

Guadagnare con Internet

Guadagnare in Internet ? E' possibile. Con un po' di pazienza e fortuna, si possono avere apprezzabili risultati ..
TOP 10 articoli #07/20
Sitemap