[css] Bordure arrondi

**H-bil** · 11/06/2006, 18h07

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 ...
@+

**Swoög** · 11/06/2006, 18h14

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

**Kerod** · 11/06/2006, 18h20

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

Sinon tu peux faire tes bords avec du dessin et après tu dispose comme tu veux

**psychoBob** · 11/06/2006, 18h47

ça arrive quand css 3 ?

**Swoög** · 11/06/2006, 20h50

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]

**cybermaxs** · 12/06/2006, 10h28

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

http://openrico.org/

**SpaceFrog** · 12/06/2006, 11h48

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

[css] Bordure arrondi

CSS

Discussions similaires

Partager

Partager