[Résolu] Bordures en rond ?

Bonjour,

Est-ce qu'on faire des bordures en rond avec les CSS si oui comment ?

Merci !!!!!
Modifié par sperron (15 May 2006 - 17:37)

As-tu lu les trois premiers topics en post-it du forum ? Dans l'un d'eux, il y a une centaine de ressource javascript, et plusieurs sites proposent de faire des bordures en rond, ou des onglets, sans aucune image.

Donc oui, c'est possible.

Je t'invite à fouiller un peu sur ce site qui est une vraie mine d'or, même si en anglais.

http://www.stunicholls.myby.co.uk/index.html : The CSS playground
Modifié par D@n!eL_ (11 May 2006 - 21:36)

Salut

va voir le site de notre ami mpop
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

A+

Ma solution a l'avantage de ne comporter aucune image.

D@n!eL_ a écrit :
Donc oui, c'est possible.

Je t'invite à fouiller un peu sur ce site qui est une vraie mine d'or, même si en anglais.

http://www.cssplay.co.uk/boxes/curves.html : The CSS playground

Super ton site MERCI !!!
Modifié par sperron (15 May 2006 - 17:34)

Bonsoir,

a écrit :
Ma solution a l'avantage de ne comporter aucune image.

Il y a probablement d'avantage d'internautes qui naviguent en désactivant le Javascript que les images.

a écrit :
Ma solution a l'avantage de ne comporter aucune image.
Il y a probablement d'avantage d'internautes qui naviguent en désactivant le Javascript que les images.

Mais d'après ton lien il n'y a même pas de JavaScript:

a écrit :

<style type="text/css">
.curvy {position:relative; width:400px; height:150px; background:#08c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#08c; background:#fff;overflow:hidden;}
#ctl {top:0px; left:0px;}
#cbl {top:130px; left:0px;}
#ctr {top:0px; left:380px;}
#cbr {top:130px; left:380px;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; color:#08c;line-height:40px;}
#quadtl {left:-8px;}
#quadtr {left:-25px;}
#quadbl {left:-8px; top:-17px;}
#quadbr {left:-25px; top:-17px;}
#txt {position:absolute; top:5px; left:5px; width:390px; height:140px; color:#fff;}

</style>

<div id="info">

<h2>CURVED CORNERS</h2>

<div class="curvy">
<div id="ctl"><div id="quadtl">&bull;</div></div>
<div id="cbl"><div id="quadbl">&bull;</div></div>
<div id="ctr"><div id="quadtr">&bull;</div></div>
<div id="cbr"><div id="quadbr">&bull;</div></div>
<div id="txt"><p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>
</div>

</div> <!-- end of info -->

Merci de l'info. !!
Modifié par sperron (15 May 2006 - 19:59)