[css] Bordure arrondi

Version imprimable

11/06/2006, 18h07
H-bil

[css] Bordure arrondi

salut
je veux savoir si c'est possible de faire des bordurs arrondi pour un tableau avec les CSS?
j'ai cherché dans des site mais il les font avec des images de fond ...
@+
11/06/2006, 18h14
Swoög

Pas en CSS 2.1 : http://www.w3.org/TR/CSS21/box.html#border-properties
par contre c'est prévu pour CSS 3 : http://www.w3.org/TR/2005/WD-css3-ba...#border-radius
11/06/2006, 18h20
Kerod

Effectivement on peut pas pour le moment sur IE mais il existe bien quelque spropriétés spécifiques
à FF qui le permettent :roll:

Sinon tu peux faire tes bords avec du dessin et après tu dispose comme tu veux
11/06/2006, 18h47
psychoBob

ça arrive quand css 3 ?
11/06/2006, 20h50
Swoög

Citation:

Envoyé par psychoBob

ça arrive quand css 3 ?

J'espère que t'es pas pressé ;) Les {navigateurs autres que IE} et supportant le CSS l'intègre à leur rythme, peu à peu, au fur et à mesure de l'avancement de la norme, mais la norme elle-même est encore en développement, donc on a encore un bout de temps avant que ce soit pleinement implémenté de manière relativement courante.

Pour ce qui est de IE... peut-être dans la version 8 ou 9 (sachant que la 7 n'implémente même pas totalement les versions 1 et 2.1)

[note]Pas de Trolls s'il vous plaît, j'énonce simplement un état de FAIT ![/note]
12/06/2006, 10h28
cybermaxs

librairie javascript

je connais une librairie javascript qui fait ça pas mal (compatible IE/FF et autres je pense)

http://openrico.org/

sinon pour le moment il faudra te contanter de ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type='text/css'>
/* Inset 3D relief  */
.relief  {background: transparent; width:40%;}
.relief  h1, .relief  p {margin:0 10px;}
.relief  h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.relief  p {padding-bottom:0.5em;}
.relief  .top, .relief  .bottom {display:block; background:transparent; font-size:1px;}
.relief  .b1, .relief  .b2, .relief  .b3, .relief  .b4, .relief  .b1b, .relief  .b2b, .relief  .b3b, .relief  .b4b {display:block; overflow:hidden;}
.relief  .b1, .relief  .b2, .relief  .b3, .relief  .b1b, .relief  .b2b, .relief  .b3b {height:1px;}
.relief  .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.relief  .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.relief  .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.relief  .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.relief  .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.relief  .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.relief  .b1 {margin:0 5px; background:#fff;}
.relief  .b2, .relief  .b2b {margin:0 3px; border-width:0 2px;}
.relief  .b3, .relief  .b3b {margin:0 2px;}
.relief  .b4, .relief  .b4b {height:2px; margin:0 1px;}
.relief  .b1b {margin:0 5px; background:#999;}
.relief  .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
</style>
 
</head>
 
<body>
<div class="relief ">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Relief</h1>
<p>Coins arrondis avec bords en relief</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

code qui peut être automatisé avec un petit javascript ...
j'ai du poster ça quelquepart ...