Des Coins arrondis sur les DIVs avec la Couleur d'arrière-plan

J'ai un peu de code qui ressemble à ceci:

<div id="shell">
    <div id="title">TITLE HERE</div>
    <div id="content">Article Content Goes Here</div>
</div>

La coquille div a une bordure grise que je veux des coins arrondis sur. Le problème, je suis en cours d'exécution dans le titre div fond est vert et qui se chevauchent les coins arrondis de la coquille. Il entre en conflit ou ne dépasse pas contre les bords pour fournir un fluide look.

Je suis à la recherche d'une solution compatible avec IE 7 et 8, mais si il y a une solution en HTML5, c'est simple, je serais prêt à perdre ces navigateurs.

Merci!

InformationsquelleAutor Dexter | 2011-06-26
  1. 33

    Dans votre balisage, vous avez à donner border-radius pour les deux #shell et #title de sorte que le #title's angles vifs ne se chevauchent pas #shell's.

    Un exemple vivant, http://jsfiddle.net/BXSJe/4/

    #shell {
 width: 500px;
 height: 300px;
 background: lightGrey;
 border-radius: 6px;
}

#title {
 background: green;
 padding: 5px;
 border-radius: 6px 6px 0 0;
}
    • Cet exemple est cassé. Les coins arrondis dans l'exemple sont non-fonctionnels dans le jsfiddle.
    InformationsquelleAutor Mridul Kashatria
  2. 23

    Un autre moyen pour y parvenir était de mettre de l'extérieur div avoir un overflow hidden

    #shell {
 width:500px;
 height:300px;
 background:lightGrey; 
 border-radius: 10px 10px 10px 10px;
 overflow:hidden;
}
#title {
 background:green;
 padding:5px;
}

    http://jsfiddle.net/jdaines/NaxuK/

    InformationsquelleAutor obiyoda
  3. 3

    Vous voudrez probablement à la ronde les deux coins du titre de la div avec le même rayon que le shell div afin qu'ils ne se chevauchent pas. Le CSS3 vous utilisez est:

    border-top-left-radius: XXpx
border-top-right-radius: XXpx

    Pour la rétro-compatibilité avec les anciens navigateurs Mozilla, vous devez également utiliser:

    -moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx

    Et pour d'anciennes versions de navigateurs WebKit (Safari, principalement), vous pouvez utiliser:

    -webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx

    Cependant, il n'y a rien que vous pouvez faire sur les vieux navigateurs Internet Explorer autant que je sache, à l'exception de l'utilisation des images.

    InformationsquelleAutor EdoDodo
  4. 0

    Vous pouvez utiliser TARTE avec IE7 et 8. Il permet à certains CSS3 fonctionnalités dans IE7 et IE8. Et oui, je sais, ce n'est pas un navigateur, c'est une douleur. Peut-être une malédiction.

    Vous pouvez le vérifier ici.

    InformationsquelleAutor leon
  5. 0

    Internet Explorer n'a pas de soutien border-radius jusqu'à ce que IE9, à la grande frustration des développeurs et des designers. Avec IE9, les étapes importantes sont à l'aide de la pointe de la balise META et de fournir le rayon des frontières:

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

    Source - http://davidwalsh.name/css-rounded-corners

    Je préfère utiliser des images, mais c'est à dire peut faire descendre la drain. Microsoft devrait intensifier c'est un jeu, et de support de CSS3.

    InformationsquelleAutor Michael Schwartz