Come creare bordi arrotondati usando il CSS

La qualità della grafica è uno dei tanti fattori che influisce sul pensiero dei visitatori, per cui non bisogna mai fermarsi nei miglioramenti, è importante quindi non deluderli evitando di non rimanere sul banale, pertanto anche se in passato ho scritto come creare tabelle in HTML non significa che siano utilizzabili per qualsiasi cosa; per fare un esempio andrebbero bene se utilizzate all'interno di un post in cui elencate codici o una lista di cose (è l'utilizzo che ne faccio io) ma trovarsi una tabella del genere anche in homepage per mettere in risalto una frase o un avviso non è proprio il massimo perché da' l'idea di una grafica troppo da dilettanti. Dato che anche io mi sono trovato in questa stessa situazione e sono riuscito a trovare un'alternativa per creare bordi e per di più arrotondati utilizzando il css voglio condividere questa esperienza anche con voi perché regala un tocco di classe al proprio sito ed anche perché è alla portata di tutti.

Recatevi sul sito CSS Matic e selezionate Border Radius, a questo punto vi apparirà il tool per generare bordi arrotondati. Queste sono le sue funzioni:

All Corner = modifica gli arrotondamenti di tutti gli angoli in modo uguale.
Top left = angolo in alto a sinistra.
Top right = angolo in alto a destra.
Bottom left = angolo in basso a sinistra.
Bottom right = angolo in basso a destra.
Border width = indica lo spessore del bordo.
Border style = indica lo stile del bordo.
Border color = indica il colore del bordo.
Background color = il colore dello sfondo del riquadrato.

Dopo che avete personalizzato il vostro bordo in base alle vostre esigenze estetiche si verrà a generare un codice che dovete incollare all'interno di quest'altro:

<style>
#contenitore {
width:300px;
height:200px;
background-color:#transparent;
color:#003366;
font-size:12px;
padding:8px;
CODICE OTTENUTO DA CSS MATIC
}
</style>
<div id="contenitore">TESTO DEL CONTENITORE</div>

Potete modificare la larghezza e l'altezza del bordo, il colore di sfondo (che di default ho messo trasparente), il colore del bordo e la grandezza del testo interno.

Al posto di CODICE OTTENUTO DA CSS MATIC dovete inserire quello che vi ha generato il sito CSS Matic, il codice per intenderci sarebbe questo qui sotto (voi inserite quello vostro):

border-radius: 22px 20px 20px 17px;
-moz-border-radius: 22px 20px 20px 17px;
-webkit-border-radius: 22px 20px 20px 17px;
border: 11px dotted #000000;

Al posto di TESTO DEL CONTENITORE inserite il testo, anche in formato HTML con grassetto, corsivo ecc. da mostrare dentro il bordo.

Questo è il bordo arrotondato che ho utilizzato io, all'interno ho inserito anche immagini, giusto per far capire ciò che si può andare a mettere. I più smanettoni possono inserire un riquadro dentro un altro (spazio permettendo) e dargli ad ognuno colori differenti.