Posez votre question Signaler

[CSS] Bordure ...

krabs 54Messages postés 27 janvier 2007Date d'inscription - Dernière réponse le 1 mars 2011 à 14:59
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
Lire la suite 

[CSS] Bordure »

12 réponses
Réponse
+1
moins plus
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...
s.spark - 20 avril 2007 à 00:33
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.
Dalida - 20 avril 2007 à 17:03
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.
Ajouter un commentaire
Réponse
+0
moins plus
Salut,

tu devrais jeter un oeil à cette discussion:
html css

Bonne chance ! ;-)
Ajouter un commentaire
Réponse
+0
moins plus
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".
Ajouter un commentaire
Réponse
+0
moins plus
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;
}

Ajouter un commentaire
Réponse
+0
moins plus
C'est quoi toute ces balises b de partout ? Tu les as imbriqué °_°
Ajouter un commentaire
Réponse
+0
moins plus
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 ...
Ajouter un commentaire
Réponse
+0
moins plus
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;
}

gryphus71 - 4 juin 2007 à 16:11
-moz-border-radius: 10px 10px 10px 10px;

mouai ...

un "-moz-border-radius: 10px;" suffirait ;)
s.spark - 4 juin 2007 à 17:40
Je sais, la question n'est pas là.
Ajouter un commentaire
Réponse
+0
moins plus
Vivement le css 3 pour pouvoir utiliser le border-radius
Ajouter un commentaire
Ce document intitulé « [CSS] Bordure ... » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Windows 8 - À quoi s'attendre ?