Création de coins arrondis à l'aide de CSS

Question

Comment créer des coins arrondis à l'aide de CSS ?

Answer 1

Depuis l'introduction de CSS3, la meilleure façon d'ajouter des coins arrondis à l'aide de CSS est d'utiliser la balise border-radius propriété. Vous pouvez lire la spécification sur la propriété, ou obtenir des des informations utiles sur la mise en œuvre sur MDN :

Si vous utilisez un navigateur qui n'a pas mettre en œuvre border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), alors les liens ci-dessous détaillent un grand nombre d'approches différentes. Trouvez celle qui convient à votre site et à votre style de codage, et suivez-la.

1. CSS Design : Création de coins personnalisés et des bordures
2. CSS Coins arrondis 'Roundup'.
3. 25 techniques de coins arrondis avec CSS

Answer 2

J'ai regardé cela au début de la création de Stack Overflow et je n'ai pas trouvé tout pour créer des coins arrondis qui ne me donnent pas l'impression d'avoir traversé un égout.

CSS3 définit enfin le site

border-radius:

C'est exactement comme ça que vous voulez que ça fonctionne. Bien que cela fonctionne bien dans les dernières versions de Safari et Firefox, mais pas du tout dans IE7 (et je ne pense pas dans IE8) ou Opera.

En attendant, c'est le piratage jusqu'en bas. J'aimerais savoir ce que d'autres personnes pensent être la manière la plus propre de faire cela dans IE7, FF2/3, Safari3 et Opera 9.5 pour le moment

Answer 3

J'obtiens généralement des coins arrondis juste avec css, si le navigateur ne supporte pas ils voient le contenu avec des coins plats. Si les coins arrondis ne sont pas si critiques pour votre site, vous pouvez utiliser ces lignes ci-dessous.

Si vous voulez utiliser tous les coins avec le même rayon, c'est le moyen le plus simple :

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

mais si vous voulez contrôler chaque coin, c'est bien :

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Comme vous le voyez, dans chaque ensemble, il y a des styles spécifiques aux navigateurs et sur la quatrième ligne, nous déclarons que le style est standard, ce qui nous permet de supposer que si, à l'avenir, les autres navigateurs (avec un peu de chance, IE aussi) décident de mettre en œuvre cette fonctionnalité, notre style sera prêt pour eux aussi.

Comme indiqué dans d'autres réponses, cela fonctionne parfaitement sur Firefox, Safari, Camino, Chrome.

Answer 4

Si vous êtes intéressé par la création de coins dans IE, ceci peut vous être utile. http://css3pie.com/

Answer 5

Je vous recommande d'utiliser des images de fond. Les autres moyens sont loin d'être aussi bons : Pas d'anticrénelage et balisage inutile. Ce n'est pas l'endroit pour utiliser JavaScript.