[CSS] Bordure ...

krabs Messages postés 54 Statut Membre -  
 Yessine -
Bonjour,
Je cherche depuis pas mal de temps a faire un div de hauteur et de largeur donné dont les angles sont arrondis et la bordure de type "inset" sans utiliser d'image.
Si quelqun aurait une idéé..
Merci

8 réponses

Réponse 1 / 8
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

à mon avis, les angles [...] arrondis et la bordure de type "inset" et sans utiliser d'image, ça fait un élément de trop.
tu as bien le code pour la bordure en 'inset', il le fait tout seul, krabs t'as montré comment faire des arrondis mais je ne vois pas comment faire les deux à la fois d'autant plus que tu ne veux pas de bitmap...
1
s.spark Messages postés 2528 Statut Contributeur 618
 
Je maintien mot pour mot tout ce que je viens de dire et je n'ai pas parlé d'images. Le bitmap n'est pas le seul format d'image, d'ailleurs il n'est jamais utilisé sur des pages web, par contre le jpg, le gif et le png, eux le sont largement.
0
Dalida Messages postés 7114 Statut Contributeur 923 > s.spark Messages postés 2528 Statut Contributeur
 
salut,

par bitmap je n'entendais pas le format bmp mais les images matricielles, quand à leur utilisation...
donc je te répète que coins arrondis et bordure sans image, pour moi c'est impossible raisonnablement. il y en a simplement un de trop.
0
Réponse 2 / 8
xjl Messages postés 232 Statut Membre 183
 
Salut,

tu devrais jeter un oeil à cette discussion:
html css

Bonne chance ! ;-)
0
Réponse 3 / 8
s.spark Messages postés 2528 Statut Contributeur 618
 
Salut,

Cette fonction n'existe pas. Toutefois elle existe de façon propriétaire, ainsi sous mozilla ca donne : 
-moz-border-radius: 10px 10px 10px 10px;


Par exemple. Sous IE ca n'existe pas, piour khtml c'est avec un autre préfixe : 
khtml-border-radius  10px 10px 10px 10px;



Bref rien de bien génial, ces balises ne sont pas standardisé. Peut être qu'avec CSS3 on aura "border-radius".
0
Réponse 4 / 8
krabs Messages postés 54 Statut Membre 20
 
Merci beaucoup,
Le probleme n'est pas les angles arrondis mais la bordure avec un effet d'ombre.
J'utilise pour les coins arrondis l'html suivant: 
             <b class="rtop">
                 <b class="r1"></b>
                 <b class="r2"></b>
                 <b class="r3"></b>
                 <b class="r4"></b>
             </b>

<div id="content"></div>

             <b class="rbottom">
                 <b class="r4"></b>
                 <b class="r3"></b>
                 <b class="r2"></b>
                 <b class="r1"></b>
             </b>

avec ce code css: 

b.rtop, b.rbottom{
     display:block;
}

b.rtop b, b.rbottom b{
     display:block;
     height: 1px;
     overflow: hidden; 
     background: #6A6458
}

b.r1{
     margin: 0 5px;
}

b.r2{
     margin: 0 3px;
}

b.r3{
     margin: 0 2px;
}

b.rtop b.r4, b.rbottom b.r4{
     margin: 0 1px;
     height: 2px;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
s.spark Messages postés 2528 Statut Contributeur 618
 
C'est quoi toute ces balises b de partout ? Tu les as imbriqué °_°
0
Réponse 6 / 8
krabs
 
Bonjour,
Oui j'ai tout trouver sur ce site:http://www.html.it/articoli/nifty/index.html
(il texpliquera sa mieux que moi)
sauf pour la bordure ...
0
Réponse 7 / 8
s.spark Messages postés 2528 Statut Contributeur 618
 
A mon avis, et c'est que mon avis, c'est impossible de le faire avec cette méthode de coin arrondi.

Mais je pense qu'avec les balise propriétaire que je t'ai passé ça devrais être bon. 

div {
-moz-border-radius: 10px 10px 10px 10px;
border: 3px inset #c0c0c0;
}
0
gryphus71
 
-moz-border-radius: 10px 10px 10px 10px;

mouai ...

un "-moz-border-radius: 10px;" suffirait ;)
0
s.spark Messages postés 2528 Statut Contributeur 618 > gryphus71
 
Je sais, la question n'est pas là.
0
Yessine
 
il suffit de mettre sans moz
#idbalise{
border-radius: 10px;
}
0
Réponse 8 / 8
r0udo0ala
 
Vivement le css 3 pour pouvoir utiliser le border-radius
0

Discussions similaires

bordure excel qui n'apparaissent pas
Marzhine -
Marzhine -

6 réponses
ajouter bordure photo sur mac
micmac2 -
micmac2 -

2 réponses
[html] bordure tableau
Utilisateur anonyme -
jcs -

19 réponses
Excel:disparition des bordures des cellules
commentcamarchea -
sabrinaluv -

1 réponse
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse