Faire un div arrondi CSS!!
Shaytan
-
Yves -
Yves -
Bonjour,
Je souhaite faire des bords arrondis a mon div:
J'ai copié/collé le code de ce site (pour ne pas me casser la tete) mais il ne fonctionne pas sur mon div. Quelqu'un aurait la solution?
http://www.html.it/articoli/nifty/index.html
CSS
#corps
{
color: red;
font-size: 14 px;
font-family: "Comic Sans MS";
border: none;
width: 800px;
height: 400px;
margin-top: 200px;
margin-left: 225px;
position: absolute;
padding-top: 10px;
padding-left: 10px;
overflow: auto;
background-color: #FF9900;
}
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML
<div id="corps">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
Qu'est-ce qui ne va pas??
Ou sont mes erreurs? Car cela ne marche pas...
Je souhaite faire des bords arrondis a mon div:
J'ai copié/collé le code de ce site (pour ne pas me casser la tete) mais il ne fonctionne pas sur mon div. Quelqu'un aurait la solution?
http://www.html.it/articoli/nifty/index.html
CSS
#corps
{
color: red;
font-size: 14 px;
font-family: "Comic Sans MS";
border: none;
width: 800px;
height: 400px;
margin-top: 200px;
margin-left: 225px;
position: absolute;
padding-top: 10px;
padding-left: 10px;
overflow: auto;
background-color: #FF9900;
}
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML
<div id="corps">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
Qu'est-ce qui ne va pas??
Ou sont mes erreurs? Car cela ne marche pas...
Configuration: Windows Vista Internet Explorer 7.0
4 réponses
-
-
Bonjour.
Pour faire des coins arrondis, tu as deux solutions : Celle de -moz-border-radius, propriété CSS qui ne fonctionne que pour Firefox et qui n'est pas validée par le W3C et la solution des images (la plus longue).
-moz-border-radius
Voici le code HTML :<p class="border-radius">Un jolie petit texte ...</p>
Code CSS :.border-radius { -moz-border-radius:3px; }
Celle des images est beaucoup plus longue mais si tu veux, je te donnerai un exemple.
-
Pensez a ajouter également -webkit-border-radius pour Safari et Chrome ...
.style { -moz-border-radius: 6px; -webkit-border-radius: 6px; } -
et border-radius:6px; pour le CSS3 ;)
