Div. arrotondato Angoli arrotondati con CSS

Puoi anche creare bordi arrotondati solo per gli angoli superiore o inferiore dell'elemento o dare a ciascun angolo un raggio di arrotondamento diverso: molta creatività! Esempio:

BorderElement (colore di sfondo: #EEDDFF; border: 6px solid # 7922CC; border-radius: 25px;) .borderElement1 (background-color: # FFE8DB; border: 6px solid # FF5A00; border-radius: 15px 100px 15px 100px;)

Ma non è tutto: invece di semplici angoli arrotondati, puoi specificare un raccordo ellittico. Per fare ciò, è necessario specificare due valori separati da una barra (per i semiassi orizzontale e verticale dell'ellisse). Ecco un esempio su un blocco di 150 × 450 pixel:

BorderElement (colore di sfondo: #EEDDFF; border: 6px solid # 7922CC; border-radius: 280px / 100px;)

I valori possono essere misti (ovvero, puoi utilizzare sia l'arrotondamento regolare che ellittico nello stesso stile) e puoi anche aggiungere uno stile personale per ogni angolo utilizzando le proprietà corrispondenti:

• border-top-left-radius - per l'angolo in alto a sinistra;
• border-top-right-radius - per l'angolo in alto a destra;
• border-bottom-left-radius - per l'angolo in basso a sinistra;
• border-bottom-right-radius - per l'angolo in basso a destra.

Principio di arrotondamento degli angoli

L'immagine seguente mostra come viene calcolato l'arrotondamento degli angoli in CSS. Quindi, se viene specificato un singolo valore per l'angolo, ad esempio 20 px, ciò significa che l'arrotondamento avverrà lungo un cerchio con un raggio di 20 pixel. Nel caso in cui vengano impostati due valori separati da una barra, ad esempio 30px / 20px, gli angoli verranno arrotondati lungo un'ellisse. Il primo valore in questo caso è la lunghezza del semiasse orizzontale dell'ellisse - 30px, e il secondo - la lunghezza del semiasse verticale - 20px:

La proprietà CSS border-radius è supportata da tutte le versioni moderne dei browser.

Gli angoli rettangolari tradizionali nella progettazione di siti Web sono noiosi per molto tempo. Sono di moda gli angoli arrotondati, che non sono realizzati usando immagini, ma attraverso stili, per i quali viene utilizzata la proprietà border-radius. Questa proprietà può avere uno, due, tre o quattro valori separati da uno spazio, che determinano il raggio di tutti gli angoli o ciascuno separatamente.

Tavolo 1 mostra un diverso numero di valori e il tipo di blocco che si ottiene in questo caso.

Il codice	Descrizione	Visualizzazione
div (raggio del bordo: 10px;)	Il raggio di arrotondamento per tutti gli angoli contemporaneamente.
div (raggio del bordo: 0 10px;)	Il primo valore imposta il raggio degli angoli in alto a sinistra e in basso a destra, il secondo valore imposta gli angoli in alto a destra e in basso a sinistra.
div (raggio del bordo: 20px 10px 0;)	Il primo valore specifica il raggio dell'angolo in alto a sinistra, il secondo - contemporaneamente in alto a destra e in basso a sinistra, e il terzo valore - in basso a destra.
div (raggio del bordo: 20px 10px 5px 0;)	Imposta in sequenza il raggio dell'angolo superiore sinistro, dell'angolo superiore destro, dell'angolo inferiore destro e dell'angolo inferiore sinistro.

L'esempio 1 mostra la creazione di un blocco con angoli arrotondati.

Esempio 1. Angoli al blocco

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. Blocco con angoli arrotondati

Un effetto interessante può essere ottenuto impostando il raggio dell'arrotondamento a più della metà dell'altezza e della larghezza dell'elemento. In questo caso, ottieni un cerchio. L'esempio 2 mostra come creare un pulsante circolare con una grafica.

Esempio 2. Pulsante rotondo

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. 2.

Riso. 2. Pulsante rotondo

Nel browser Opera, arrotondando a viene applicato in modo errato se il bordo non è impostato tramite la proprietà border.

La proprietà border-radius può essere combinata con altre proprietà, come l'aggiunta di un'ombra esterna a un elemento. Nell'esempio 3, viene creato un insieme di cerchi, di cui uno è evidenziato con un riquadro-ombra. Questo set può essere utilizzato per navigare tra pagine o foto.

Esempio 3. Bagliore

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 3. Bagliore intorno al cerchio

Con l'aiuto del raggio del bordo, puoi creare non solo un cerchio, ma anche un'ellisse, nonché un arrotondamento ellittico di un blocco. Per fare ciò, devi scrivere non un valore, ma due attraverso una barra. Scrivere 20px / 10px significa che il raggio orizzontale del round sarà di 20 pixel e il raggio verticale è di 10 pixel. L'esempio 4 mostra come creare angoli ellittici per aggiungere testo in stile fumetto a una foto.

Esempio 4. Ellissi

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Sei il tuo insegnante

Il risultato di questo esempio è mostrato in Fig. 4.

Riso. 4. Utilizzo di angoli ellittici

Puoi anche cambiare l'aspetto degli angoli sulle immagini aggiungendo una proprietà border-radius al selettore img, come mostrato nell'Esempio 5.

Esempio 5. Immagini

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Angoli arrotondati nei CSS può essere fatto in molti modi, in molti modi, alcuni dei quali possono essere considerati obsoleti, poiché CSS 3 introduce nuove proprietà che consentono di arrotondare gli angoli degli elementi HTML. Tuttavia, in primo luogo, i vecchi browser non supportano queste proprietà e, in secondo luogo, tali idee a volte nascono nel cervello creativo di un designer che solo i vecchi metodi salvano. Pertanto, qui esamineremo diverse opzioni su come modellare gli angoli arrotondati nei CSS, dal più semplice al più complesso.

In questi esempi, gli spigoli sono arrotondati in corrispondenza di elementi di blocco inizialmente e in alcuni esempi questi blocchi sono utilizzati come elementi ausiliari. Ma ricorda che puoi facilmente fare lo stesso con gli elementi a livello di linea preimpostandoli con un valore di blocco o inline-block, se necessario.

Angoli arrotondati in CSS 3 senza immagini

Questo esempio utilizza le proprietà CSS 3 per semplificare l'arrotondamento degli angoli senza la necessità di immagini.

Esempio HTML e CSS: arrotondare gli angoli con CSS 3 senza immagini

Blocca il contenuto.

Descrizione dell'esempio

1. Per arrotondare gli angoli, utilizziamo la proprietà CSS 3 che tutti i browser moderni comprendono.
2. Per i browser meno recenti Firefox, Chrome e Safari, applichiamo proprietà speciali con i prefissi -moz- e -webkit-, che avevano prima che la proprietà principale fosse supportata. Sfortunatamente, non ci sono analoghi simili per la vecchia Opera e IE. Si noti che durante la creazione di raccordi complessi, le proprietà prefissate potrebbero non funzionare correttamente. Questo è il motivo per cui nel codice CSS sono stati specificati più in alto della proprietà principale, in modo che secondo priorità di stile, i browser che già capiscono "pulito" lo hanno utilizzato.

Le proprietà con prefisso mancano dalla specifica CSS, quindi il loro utilizzo risulterà in codice non valido.

Angoli arrotondati in CSS senza immagini

Non ci sono immagini neanche in questo esempio, ma vengono utilizzati blocchi aggiuntivi. L'essenza del metodo è che prima e dopo il contenuto principale vengono indicati diversi blocchi che, allontanandosi da esso, diminuiscono gradualmente in larghezza utilizzando i margini esterni laterali. Grazie a ciò, si verifica un'imitazione dell'arrotondamento degli angoli.

Questo metodo è dannoso perché il codice è "disseminato" di blocchi aggiuntivi, ma, sfortunatamente, in molti esempi, tali blocchi saranno presenti. Un altro svantaggio: con grandi raggi di curvatura, dovrai aggiungere ancora più blocchi di quelli usati nell'esempio.

Esempio HTML e CSS: arrotondare gli angoli senza utilizzare le immagini

Blocca il contenuto.

Descrizione dell'esempio

1. All'interno del blocco con class = "block" specifichiamo un elemento per il contenuto principale ("content_block") prima del quale mettiamo dei blocchi per simulare l'arrotondamento degli angoli ("b1", "b2", "b3"). Dopo di ciò li mettiamo nello stesso ordine, ma in ordine inverso.
2. Assegna i blocchi per simulare l'altezza richiesta e i margini laterali (CSS) per creare l'aspetto degli angoli. Abbiamo anche ripristinato la loro dimensione del carattere (CSS) e impostato: nascosto - questo è destinato ai browser più vecchi che possono aumentare l'altezza e renderla più grande di quella specificata.
3. In questo esempio, oltre ad arrotondare gli angoli, è stata aggiunta anche un'imitazione di una cornice, se non ne hai bisogno, quindi rimuovi semplicemente tutti i "bordi" dagli elementi e rimuovi il colore di sfondo dal blocco "b3".

Il modo più semplice per far apparire gli angoli arrotondati nei CSS è usare un'immagine come sfondo per un elemento. In questo caso, le dimensioni dell'elemento sono generalmente indicate come le dimensioni dell'immagine di sfondo. Lo svantaggio di questo metodo è che il contenuto dell'elemento non dovrebbe andare oltre i suoi confini, cioè dovrebbe essere di una certa dimensione limitata.

Esempio HTML e CSS: arrotondare gli angoli utilizzando una singola immagine

MENÙ

Descrizione dell'esempio

1. Usando la proprietà CSS, imposta un'immagine di sfondo per il blocco, a cui è vietato moltiplicare verticalmente e orizzontalmente (no-repeat), poiché in questo caso non è richiesto.
2. Per evitare che il testo all'interno del blocco aderisca ai suoi bordi, imposta il suo riempimento interno (CSS) su 5 px su ciascun lato.
3. Successivamente, è necessario impostare il blocco sulle stesse dimensioni dello sfondo. La nostra immagine di sfondo ha dimensioni di 140x32 pixel, ma specifichiamo la larghezza (CSS) e l'altezza (CSS) per il blocco stesso, diminuendo di 10px. Ho dovuto ridurlo a causa dell'imbottitura interna, che espande anche l'elemento di 5 px in ogni direzione.

Nell'esempio precedente, la dimensione del blocco era fissa e dipendeva dalla dimensione dell'immagine di sfondo, il che è molto scomodo. Ora faremo in modo che la larghezza del nostro blocco sia ridimensionabile. Per fare ciò, ritaglia tre parti dell'immagine: i lati e un pezzo del centro. Quindi posizioneremo due elementi con dimensioni fisse all'interno del blocco principale, che, a causa del posizionamento assoluto, posizioneremo ai suoi lati. Imposteremo le stesse parti laterali per lo sfondo e la parte centrale per il blocco principale. Questo creerà un blocco con angoli arrotondati e una larghezza variabile.

Questa tecnica è molto spesso utilizzata per arrotondare elementi a riga singola come collegamenti o titoli di sezioni/menu.

Esempio HTML e CSS: arrotondamento degli angoli utilizzando i blocchi laterali

Contenuto principale.

Descrizione dell'esempio

1. All'interno del blocco class = "block" posizioniamo due elementi - "left_bok" e "right_bok", che impostiamo come immagini di sfondo (CSS) delle parti laterali e ne vietiamo la riproduzione (no-repeat). Per il blocco principale, impostiamo lo sfondo dalla parte centrale e permettiamo che sia duplicato solo orizzontalmente (repeat-x).
2. Specificare la larghezza per i blocchi laterali corrispondenti alla dimensione dello sfondo, per noi è 14x32 pixel. Ma per il blocco principale, come nell'esempio precedente, imposta l'altezza a 22 px per compensare l'imbottitura verticale.
3. Posizioneremo i nostri lati rispetto al "blocco", quindi specifichiamo per esso: relativo e per i lati stessi - assoluto. Bene, quindi li premiamo ai lati corrispondenti del genitore usando le proprietà CSS e.
4. Per evitare che il contenuto del blocco si nasconda sotto le immagini laterali, impostare l'imbottitura laterale "blocco" (CSS), che può essere uguale o leggermente più grande dei lati stessi. Impostiamo anche piccoli margini in alto e in basso in modo che il testo non si "attacchi" ai bordi.

IE6 ha un piccolo bug con questo metodo:

Se la larghezza o l'altezza del "blocco" è dispari, apparirà uno spiacevole margine di 1 pixel tra il bordo interno del blocco e il lato posizionato a destra, che rovinerà l'intera immagine. Questo bug può essere risolto usando Hack CSS con una certa espressione, ma non darò nemmeno un esempio del genere qui, poiché spesso "congela" il browser ed è meglio non usarlo.

Facciamolo diversamente. Impostiamo "right_bok" il margine sinistro (CSS) al 100% in modo che venga spostato dietro il bordo destro del riquadro principale, e poi lo riportiamo indietro, spostandolo a sinistra del numero di pixel pari al suo larghezza. IE6 funziona correttamente con i valori di queste proprietà, quindi non ha altra scelta che mettere il blocco dove ne abbiamo bisogno.

Questo metodo di arrotondamento degli angoli è simile al precedente, ma a differenza di esso, qui non gli elementi HTML sono posizionati sui lati, ma aggiunti al blocco principale pseudo-elementi... Grazie a questo approccio, siamo riusciti a eliminare il codice HTML non necessario della pagina.

Esempio HTML e CSS: arrotondamento degli angoli utilizzando pseudo-elementi laterali

Contenuto principale.

Descrizione dell'esempio

1. Usando pseudo-elementi CSS e indicando che vogliamo aggiungere qualcosa all'inizio e alla fine del blocco principale. E, usando la proprietà CSS, aggiungiamo solo le immagini necessarie degli angoli arrotondati, o meglio dei lati. Ecco come abbiamo creato due pseudo-elementi di immagine.
2. Bene, allora facciamo tutto esattamente come nell'esempio precedente, lavoriamo solo con gli pseudo-elementi creati.

Per IE6 e IE7, in questo esempio sono state utilizzate le stampelle:

1. Come sai, IE6 e IE7 non capiscono gli pseudo-elementi usati qui, quindi facciamo quanto segue. Usiamo espressione, che integra due tag all'interno dell'elemento principale, e abbiamo già impostato gli stessi stili dell'esempio precedente. Nota che il codice inserito dopo il primo innerHTML viene aggiunto immediatamente dopo il tag "block" di apertura e dopo il secondo innerHTML, prima del tag di chiusura. Sì, nel nostro caso non importa, poiché si usa il posizionamento assoluto, ma a volte è utile conoscerlo.
2. Per evitare che questo codice venga visto da altri browser, lo alleghiamo in commenti condizionali... Sarebbe meglio se lo mettessi anche in un file CSS separato, che dovrebbe essere incluso con un tag chiuso con gli stessi commenti.

Angoli arrotondati in CSS utilizzando l'avvolgimento a blocchi

L'essenza di questo metodo è che prima gli angoli vengono ritagliati dall'immagine. Quindi, diversi altri blocchi (in base al numero di angoli) vengono posizionati all'interno del blocco principale, che sono annidati l'uno nell'altro. A ciascuno di essi viene assegnato un angolo dell'immagine come sfondo. Le immagini sono vietate dalla riproduzione e le coordinate sono fornite in modo che occupino posti agli angoli dei blocchi. Questo dà l'effetto di angoli arrotondati.

Esempio HTML e CSS: arrotondamento degli angoli utilizzando il wrapping dei blocchi

Blocca il contenuto.

Descrizione dell'esempio

1. Ne abbiamo messi altri quattro all'interno del blocco principale. Poiché nessuno di questi blocchi ha margini o cornici impostati, e solo quello più interno ha margini, risultano tutti uguali in altezza e larghezza.
2. Usando la proprietà CSS, imposta un angolo per ciascuno dei blocchi interni come sfondo, disabilita la loro moltiplicazione e posizionali agli angoli dei blocchi. E poiché il colore di sfondo degli elementi è trasparente, tutti e quattro gli angoli dello sfondo sono visibili sulla pagina.
3. Aggiungi il colore di sfondo desiderato al blocco d'angolo più esterno. È tutto pronto.

È possibile impostare esplicitamente la larghezza del blocco specificando la proprietà desiderata per class = "block", tuttavia, per modificare l'altezza, è necessario utilizzare l'elemento più interno (lo abbiamo "rb").

Angoli arrotondati in CSS utilizzando il posizionamento

Anche qui gli angoli sono ritagliati per lo sfondo, che sarà indicato nei piccoli blocchi. Utilizzando il posizionamento assoluto CSS, queste caselle vengono posizionate negli angoli dell'elemento principale, a cui viene assegnato il colore di sfondo desiderato.

Esempio HTML e CSS: arrotondamento degli angoli utilizzando il posizionamento

Blocca il contenuto.

Descrizione dell'esempio

1. All'interno dell'elemento principale (class = "block") posizioniamo quattro tag con le classi "corn_lt", "corn_rt", "corn_lb", "corn_rb", che fungeranno da blocchi d'angolo.
2. Usando la proprietà CSS, colleghiamo la nostra immagine di sfondo a ciascun blocco d'angolo e impostiamo la sua larghezza e altezza di dimensioni uguali a queste immagini di sfondo. Per essere al sicuro, reimposta la dimensione del carattere (CSS) e ritaglia l'eccesso (CSS).
3. Specificare il posizionamento relativo per l'elemento principale (CSS: relativo), poiché posizioneremo i blocchi d'angolo relativi ad esso e per gli angoli stessi - assoluto (assoluto).
4. Utilizzando le proprietà CSS, e, specificare per i blocchi d'angolo le distanze di offset verticale e orizzontale in modo che si trovino agli angoli del blocco principale.

IE6 ha un paio di problemi in questo modo:

1. Se "blocco" non specifica esplicitamente la larghezza, gli angoli a sinistra non verranno inseriti in posizione. Questo perché il blocco ha un'imbottitura. Il modo più semplice per risolvere il problema è rimuovere i rientri e racchiudere il contenuto principale del "blocco" (senza angoli) in un blocco wrapper aggiuntivo e specificare i rientri necessari nel wrapper. Ma l'ho fatto in modo diverso qui abilitando il layout con la proprietà zoom: 1, che dice a IE6 di eseguire il rendering dell'elemento alla sua dimensione naturale. Questa proprietà non è valida, quindi, se decidi di utilizzarla, allora ti consiglio di effettuare una connessione tramite commenti condizionali.
2. Lo stesso bug di un pixel discusso sopra. Ma qui, possono formarsi spazi vuoti non solo tra gli angoli destri e il lato destro del blocco, ma anche sotto. E se ci siamo sbarazzati degli spazi vuoti a destra, questo non funzionerà con quelli inferiori. La via d'uscita è indicare esplicitamente la larghezza e l'altezza pari dell'elemento principale. Si possono impostare anche valori dispari, ma poi sarà necessario impostare le distanze di spostamento verso il basso e verso destra uguali non a zero, ma a -1px.

In effetti, la tecnologia per questo modo di arrotondare gli angoli nei CSS è la stessa della precedente, quindi qui i commenti dettagliati verranno omessi. L'unica differenza è che invece di immagini separate degli angoli di sfondo, qui viene utilizzata un'immagine sprite comune. Grazie a questo, il caricamento del sito è accelerato, perché un'immagine "pesa" meno di quattro e per ospitando c'è un appello invece di quattro.

Uno sprite è un'immagine che combina più immagini contemporaneamente utilizzate come sfondo per gli elementi del sito web. Quale parte dello sprite sarà lo sfondo per questo o quell'elemento HTML dipende dalle coordinate specificate in una speciale proprietà CSS.

Esempio HTML e CSS: arrotondamento degli angoli utilizzando posizionamento e sprite

Blocca il contenuto.

Descrizione dell'esempio

1. Usando la proprietà CSS, collega un'immagine sprite di sfondo ai blocchi d'angolo, che ha una forma arrotondata con dimensioni di 22x22 pixel (11x11 pixel per ogni quarto d'angolo).
2. Utilizzando la proprietà CSS, specifichiamo le coordinate dell'offset dello sfondo. Ad esempio, un valore di -11px 0 significa che lo sfondo verrà spostato a sinistra di 11px lungo l'asse X, ma non verrà spostato lungo l'asse Y. Pertanto, la metà sinistra dello sprite va oltre il confine dell'elemento e rimane solo quella destra. Ma anche questo è visibile solo a metà, poiché è alto 22 pixel e l'altezza del blocco d'angolo stesso è di soli 11 pixel. Quindi si scopre che con questo valore, il quarto in alto a destra dello sprite diventerà lo sfondo dell'elemento.

IE6 ha gli stessi problemi dell'esempio precedente.

In questo esempio, arrotonderemo gli angoli di un elemento che ha un bordo, ma questa non è una caratteristica di questo particolare metodo: puoi facilmente usare l'arrotondamento con un bordo negli esempi precedenti.

Effettueremo l'arrotondamento utilizzando gli pseudo-elementi creati nel blocco principale, ma senza applicare loro il posizionamento.

E un momento. Negli esempi precedenti, gli angoli sono stati tagliati insieme allo sfondo all'interno, e ciò non è sempre necessario, soprattutto se si presume che lo sfondo di un blocco con angoli arrotondati non sia uniforme. Pertanto, lo sfondo all'interno della cornice qui è stato reso trasparente (il formato PNG lo consente) e quando gli angoli sono stati ritagliati, anche la loro parte interna si è rivelata trasparente. Se necessario, puoi anche utilizzare un approccio simile negli esempi precedenti.

Esempio HTML e CSS: arrotondamento degli angoli utilizzando pseudo-elementi

Blocca il contenuto.

sfondo e con l'aiuto di esso li posizioniamo sul lato destro e vietiamo la "riproduzione". Tutto, gli angoli sono pronti.

Poiché abbiamo specificato i margini interni (CSS) per "blocco", gli pseudo-elementi, e di conseguenza gli angoli, non si trovano agli angoli del blocco, ma sono sfalsati dai bordi di 15 px. Per risolvere questo problema, diamo agli pseudo-elementi margini negativi (CSS) sui lati necessari per posizionarli sopra l'imbottitura. Ma facciamo i margini non 15, ma 17px, questo è necessario per coprire il frame (CSS), la cui larghezza è 2px (15 + 2 = 17). Questo è tutto.

Per IE6 e IE7, qui abbiamo usato le già familiari "stampelle" con l'iniezione di HTML, poiché questi browser non comprendono gli pseudo-elementi utilizzati qui:

1. Usando l'espressione, integra due tag nell'elemento principale, che convertiamo anche in blocchi. Quindi mettiamo un tag in loro. E poi questi tag hanno le stesse proprietà degli pseudo-elementi. L'unica cosa è che aggiungiamo anche la proprietà CSS: relative, senza la quale la cornice si sovrappone agli angoli.

Lo svantaggio di questo metodo è che l'altezza non può essere impostata in modo esplicito per un blocco con angoli arrotondati, perché se supera la dimensione del contenuto, gli angoli inferiori non si attaccheranno ai bordi. Questo può essere evitato se si racchiude ancora il contenuto principale in un altro blocco e si imposta l'altezza su di esso.

Un altro esempio di arrotondamento degli angoli con pseudo-elementi e senza blocchi aggiuntivi

Questo esempio è simile al precedente, ma utilizza il posizionamento per disporre gli pseudo-elementi. Grazie a questo approccio, è stato possibile specificare esplicitamente l'altezza di un blocco con angoli arrotondati.

Esempio HTML e CSS: arrotondamento degli angoli in cui è possibile modificare l'altezza del blocco

Blocca il contenuto.

E ancora, per IE6 e IE7, aggiungiamo alcuni elementi aggiuntivi all'interno del blocco principale usando l'espressione e il codice viene chiuso nei commenti condizionali. Ma questa volta non proveremo nemmeno a emulare gli pseudo-elementi, ma lo faremo più facilmente.

1. Aggiungi quattro tag all'interno del "blocco" e posizionali. E poi li puntiamo semplicemente agli angoli dell'immagine come sfondo e li posizioniamo negli angoli dell'elemento principale. Cioè, agiamo esattamente come in uno dei metodi discussi sopra.
2. Per eliminare il bug di un pixel (menzionato sopra più di una volta), aggiungi un margine sinistro del 100% (CSS) agli elementi dell'angolo destro e un offset negativo di -9px. In generale, se ricordi, questo offset dovrebbe essere uguale alla larghezza del blocco d'angolo (lo abbiamo 11px), ma non dimenticare il bordo di 2px che abbiamo qui - dobbiamo mettere gli angoli sopra di esso (11px -2px = 9px).

A proposito, infatti, sarebbe più facile emulare gli pseudo-elementi, come abbiamo fatto nell'esempio precedente - in questo modo il codice aggiuntivo sarebbe inferiore. Ma non in IE6, questo browser avrebbe avuto bisogno di qualche stampella in più e, di conseguenza, avrebbe dovuto scrivere due commenti condizionali- per IE6 e IE7, e questo aumenterebbe solo il codice ...

In Firefox, questo metodo funziona correttamente dalla versione 3.6 e in Opera - dalla versione 10.0, non ho trovato stampelle per loro, poiché è di scarsa rilevanza.