Création de coins arrondis à l'aide de CSS [fermé]

Comment puis-je créer des coins arrondis en utilisant CSS?

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

Si vous utilisez un navigateur non implémenté border-radius (Chrome pré-v4, Firefox pré-v4, IE8, Opera pré-v10.5, Safari pré-v5), les liens ci-dessous détaillent tout un tas d'approches différentes. Trouvez celui qui convient à votre site et à votre style de codage, et allez-y.

1. Conception CSS: création de coins et bordures personnalisés
2. CSS Rounded Corners 'Roundup'
3. 25 techniques de coins arrondis avec CSS

J'ai regardé cela au début de la création de Stack Overflow et je n'ai trouvé aucune méthode pour créer des coins arrondis qui ne me donnaient pas l'impression de traverser un égout.

CSS3 définit enfin le

border-radius:

C'est exactement comme ça que vous voudriez 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 du piratage tout le long. Je suis intéressé à entendre ce que les autres pensent être la façon la plus propre de le faire sur IE7, FF2 / 3, Safari3 et Opera 9.5 pour le moment ..

J'obtiens généralement des coins arrondis juste avec CSS, si le navigateur ne prend pas en charge, 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 souhaitez 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, vous avez des styles spécifiques au navigateur et sur les quatrièmes lignes, nous déclarons de manière standard par cela, nous supposons que à l'avenir les autres (espérons-le IE aussi) décident de mettre en œuvre la fonctionnalité pour que notre style soit prêt pour eux aussi.

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

Si vous êtes intéressé à créer des coins dans IE, cela peut être utile - http://css3pie.com/

Je recommanderais d'utiliser des images d'arrière-plan. Les autres moyens ne sont pas aussi bons: pas d'anti-aliasing et de balisage insensé. Ce n'est pas le lieu d'utiliser JavaScript.

Comme l'a dit Brajeshwar: Utilisation du border-radiussélecteur css3. À ce jour, vous pouvez appliquer -moz-border-radiuset -webkit-border-radiuspour les navigateurs basés sur Mozilla et Webkit, respectivement.

Alors, que se passe-t-il avec Internet Explorer?. Microsoft a de nombreux comportements pour donner à Internet Explorer des fonctionnalités supplémentaires et acquérir plus de compétences.

Ici: un .htcfichier de comportement pour récupérer round-cornersde la border-radiusvaleur dans votre CSS. Par exemple.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Bien sûr, le sélecteur de comportement n'est pas un sélecteur valide, mais vous pouvez le placer sur un autre fichier CSS avec des commentaires conditionnels (uniquement pour IE).

Le fichier comportement HTC

La prise en charge de CSS3 étant implémentée dans les nouvelles versions de Firefox, Safari et Chrome, il sera également utile de regarder "Border Radius".

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

Comme tout autre raccourci CSS, ce qui précède peut également être écrit dans un format étendu, et ainsi atteindre un rayon de bordure différent pour le topleft, topright, etc.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery est la façon dont je traiterais cela personnellement. le support css est minime, les images sont trop compliquées, pour pouvoir sélectionner les éléments que vous voulez avoir dans les coins arrondis dans jQuery est parfaitement logique pour moi même si certains vont sans doute argumenter autrement. Il y a un plugin que j'ai récemment utilisé pour un projet à l'œuvre ici: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Il y a toujours la manière JavaScript (voir les autres réponses) mais comme c'est purement stylistique, je suis plutôt contre l'utilisation de scripts clients pour y parvenir.

La manière que je préfère (bien qu'elle ait ses limites), est d'utiliser 4 images aux coins arrondis que vous positionnerez dans les 4 coins de votre box en utilisant CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Comme mentionné, il a ses limites (l'arrière-plan derrière la boîte arrondie doit être uni, sinon les coins ne correspondront pas à l'arrière-plan), mais cela fonctionne très bien pour autre chose.

Mise à jour: amélioration de l'implémentation à l'aide d'une feuille de sprite.

Personnellement, j'aime le mieux cette solution, c'est un .htc pour permettre à IE de rendre les bordures courbes.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Dans Safari, Chrome, Firefox> 2, IE> 8 et Konquerer (et probablement d'autres), vous pouvez le faire en CSS en utilisant la border-radiuspropriété. Comme il ne fait pas encore officiellement partie de la spécification, veuillez utiliser un préfixe spécifique au fournisseur ...

Exemple

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Les solutions JavaScript ajoutent généralement un tas de petits divs pour lui donner un aspect arrondi, ou elles utilisent des bordures et des marges négatives pour créer des coins crantés 1px. Certains peuvent également utiliser SVG dans IE.

IMO, la méthode CSS est meilleure, car elle est facile et se dégradera gracieusement dans les navigateurs qui ne la prennent pas en charge. Ce n'est, bien sûr, que le cas où le client ne les applique pas dans les navigateurs non pris en charge tels que IE <9.

Voici une solution HTML / js / css que j'ai faite récemment. Il y a une erreur d'arrondi de 1px avec un positionnement absolu dans IE, donc vous voulez que le conteneur ait un nombre pair de pixels de large, mais c'est assez propre.

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

L'image n'a qu'une largeur de 18 pixels et les 4 coins sont regroupés. Ressemble à un cercle.

Remarque: vous n'avez pas besoin du deuxième wrapper interne, mais j'aime utiliser la marge sur le wrapper interne afin que les marges des paragraphes et des titres maintiennent toujours l'effondrement des marges. Vous pouvez également ignorer le jquery et simplement mettre le wrapper interne en html.

Pour indiquer à quel point il est complexe de faire fonctionner les coins arrondis, même Yahoo les décourage (voir le premier point à puce)! Certes, ils ne parlent que de coins arrondis de 1 pixel dans cet article, mais il est intéressant de voir que même une entreprise avec son expertise a conclu qu'elle était tout simplement trop pénible pour les faire travailler la plupart du temps.

Si votre conception peut survivre sans eux, c'est la solution la plus simple.

Bien sûr, si c'est une largeur fixe, c'est super facile à utiliser CSS, et pas du tout offensant ou laborieux. C'est lorsque vous en avez besoin pour évoluer dans les deux sens que les choses deviennent saccadées. Certaines des solutions ont une quantité stupéfiante de divs empilés les uns sur les autres pour y arriver.

Ma solution est de dicter au concepteur que s'il veut utiliser des coins arrondis (pour le moment), il doit s'agir d'une largeur fixe. Les concepteurs adorent les coins arrondis (moi aussi), donc je trouve que c'est un compromis raisonnable.

Ruzee Borders est la seule solution de coin arrondi anticrénelage basée sur Javascript que j'ai trouvée qui fonctionne dans tous les principaux navigateurs (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), et AUSSI la seule qui fonctionne lorsque l'élément arrondi ET l'élément parent contiennent une image d'arrière-plan. Il fait également des bordures, des ombres et des lumières.

Le nouveau RUZEE.ShadedBorder est une autre option, mais il ne prend pas en charge l'obtention d'informations de style à partir de CSS.

Si vous allez avec la solution border-radius, il y a ce site Web génial pour générer le CSS qui le fera fonctionner pour safari / chrome / FF.

Quoi qu'il en soit, je pense que votre conception ne devrait pas dépendre du coin arrondi, et si vous regardez Twitter, ils disent simplement F **** aux utilisateurs d'IE et d'opéra. Les coins arrondis sont agréables à avoir, et je suis personnellement d'accord pour les utilisateurs sympas qui n'utilisent pas IE :).

Maintenant, bien sûr, ce n'est pas l'opinion des clients. Voici le lien: http://border-radius.com/

Pour ajouter les solutions htc mentionnées ci-dessus, voici d'autres solutions et exemples pour atteindre les coins arrondis dans IE .

Il n'y a pas de "meilleur" moyen; il existe des moyens qui fonctionnent pour vous et d'autres qui ne fonctionnent pas. Cela dit, j'ai publié un article sur la création d'une technique de coin arrondi fluide basée sur CSS + Image ici:

Boîte à coins ronds à l'aide de CSS et d'images - Partie 2

Un aperçu de cette astuce est qu'il utilise des DIV imbriqués et la répétition et le positionnement de l'image d'arrière-plan. Pour les mises en page à largeur fixe (hauteur extensible à largeur fixe), vous aurez besoin de trois DIV et de trois images. Pour une disposition de largeur fluide (largeur et hauteur extensibles), vous aurez besoin de neuf DIV et de neuf images. Certains pourraient le considérer comme trop compliqué, mais à mon humble avis, c'est la solution la plus soignée de tous les temps. Pas de piratage, pas de JavaScript.

J'ai écrit un article de blog à ce sujet il y a quelque temps, donc pour plus d'informations, voir ici

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Cela fonctionne plutôt bien. Pas besoin de Javascript, juste CSS et HTML. Avec un minimum de HTML interférant avec les autres trucs. C'est très similaire à ce que Mono a publié, mais ne contient pas de hacks spécifiques à IE 6 et, après vérification, ne semble pas fonctionner du tout. En outre, une autre astuce consiste à rendre la partie intérieure de chaque image d'angle transparente afin qu'elle ne bloque pas le texte qui est près du coin. La partie extérieure ne doit pas être transparente afin de pouvoir couvrir le bord du div non arrondi.

De plus, une fois que CSS3 sera largement pris en charge avec border-radius, ce sera la meilleure façon officielle de créer des coins arrondis.

N'utilisez pas CSS, jQuery a été mentionné plusieurs fois. Si vous avez besoin d'un contrôle total sur l'arrière-plan et la bordure de vos éléments, essayez le plug - in jQuery Background Canvas . Il place un élément HTML5 Canvas en arrière-plan et vous permet de dessiner chaque arrière-plan ou bordure que vous souhaitez. Coins arrondis, dégradés, etc.

Opera ne prend pas encore en charge border-radius (apparemment, ce sera dans la version après la version 10). En attendant, vous pouvez utiliser CSS pour définir un arrière-plan SVG pour créer un effet similaire .