bordi arrotondati sono diventati molto più facile da fare in CSS dal CSS3. La proprietà border-radius porta essenzialmente angoli arrotondati per gli elementi attraverso dichiarazioni CSS puro. Browser supportati per la proprietà border-radius non è coerente, tuttavia, così quando si utilizza questa proprietà all'interno di una pagina web, è una buona idea quella di aggiungere due ulteriori dichiarazioni.

Fare angoli arrotondati

La proprietà border-radius è la dichiarazione che produce gli angoli arrotondati. Il valore del raggio confine utilizza le impostazioni di pixel o spazi em, dove i numeri più alti aumentano la quantità di curva. Lo stesso che con un margine, padding e border, ci sono separati proprietà border-radius per ogni angolo di un elemento. Se vengono immessi due valori, diventano i raggi orizzontale e verticale per un angolo ellittica.

Mozilla Variazione

browser Mozilla richiedono lievi variazioni al codice CSS3 per implementare i bordi arrotondati. Sia che si utilizzi "px" o valori "em", uno o due numeri producono risultati diversi. La sintassi di Mozilla Firefox 3.5 prima supportata solo i bordi rotondi per una sola cifra; l'aggiunta di un secondo valore si tradurrebbe in un angolo standard quadrato. Newer sintassi Firefox consente di definire quattro diversi circolari o ellittiche angoli. Una barra tra due numeri viene interpretato come impostazioni orizzontali e verticali.

border-top-right-radius, -moz-border-radius-topright

border-bottom-right-radius, -moz-border-radius-bottomright

border-bottom-left-radius, -moz-border-radius-bottomleft

border-top-left-radius, -moz-border-radius-topleft

border-radius, -moz-border-radius

WebKit Variazione

La proprietà border-radius in WebKit, che è quello che utilizza il browser Safari, accetta uno o due valori e li applica in tutti i quattro angoli styling per una forma simmetrica. Come la variazione di Mozilla, la variazione WebKit differisce leggermente dalla dichiarazione CSS3.

border-top-right-radius, -webkit-border-top-right-radius

border-bottom-right-radius, -webkit-border-bottom-right-radius

border-bottom-left-radius, -webkit-border-bottom-left-radius

border-top-left-radius, -webkit-border-top-left-radius

border-radius, -webkit-border-radius

Arrotondato bordo Utilizzare caselle

Il div involucro produce un bordo arrotondato all'interno di un'area definita come una scatola, al contrario di un bordo intorno al perimetro del div. Questo è stato creato da styling del div genitore con un div bambino. Il codice è semplice per coloro abili a codifica:

.Wrap {

border-width: 0;

background-color: # A52A2A;

width: 54%;

padding: 0.6em;

}

#panel .Wrap {

background-color: ereditare;

altezza: 6em;

border: 4px tratteggiato # A52A2A;

text-align: center;

}

E il codice HTML:

<Div class = "wrap">

<Div id = "pannello">

<P> Questo pannello apparirà come un bordo interno cucito. </ P>

</ Div>

</ Div>