La funzionalità di bordi arrotondati CSS3 fornisce la possibilità di creare facilmente rthe curvo effetto bordo e gode del sostegno di Internet Explorer 9, Firefox 4, Safari 5 e altri principali browser Web. I bordi curvi contribuiscono a creare un senso di equilibrio nel design di un sito Web. Loro angoli lisci tagliare la monotonia di linee rette e dare una pagina un aspetto più morbido.

Istruzioni

1

Trovare il selettore CSS per aggiungere i bordi curvi. Inserire la proprietà "border-radius" e immettere il valore in percentuale o in unità, come pixel o ems. Più alto il numero, più arrotondato la curva. Ad esempio, per fare i bordi di un pixel di 50 tag < div > dimensioni, scrivere:

div
{
border-style: solid; / Commento: questo è necessario fare lui bordi visibili. /
border-radius: 50px;
}

2

Immettere le proprietà del bordo individualmente se si desidera assegnare una quantità di curva diversa ad ogni angolo. Seguire l'ordine superiore sinistro, superiore destro, inferiore destro, inferiore sinistro, come illustrato di seguito:

div {border-style: solid;
border-top-sinistra-raggio: 1em;
bordo-parte superiore-destra-raggio: 2em;
border-bottom-giusto-raggio: 3em;
border-bottom-sinistra-raggio: 4em;
}

3

Scrivere al confine proprietà radius in un'unica dichiarazione, come segue. Utilizzare questo metodo di stenografia se non volete a dichiarare proprietà di ogni angolo individualmente. Questo esempio fa sì che gli angoli superiori sinistra e in basso sinistro essere angolare mentre l'alto a destra e destra angoli inferiori sono curvi.

div {border-radius: 0em 3em 3em 0em;
}

Consigli & Avvertenze

• Ogni angolo può avere fino a due valori. Ad esempio, la proprietà "border-top-right-radius" può avere un valore di "2em 1em." Il primo valore è il raggio orizzontale, il secondo valore è il raggio verticale. Se si immette un solo valore, lo stesso valore verrà utilizzato per entrambi i raggi.
• Prefisso "- moz-" (senza virgolette) prima che la proprietà "border-radius" per Firefox 3.6 e versioni precedenti.
• I bordi curvi non funzionano con le versioni di Internet Explorer precedenti IE9.