[CSS] Bordure ...

Fermé
krabs Messages postés 54 Date d'inscription samedi 27 janvier 2007 Statut Membre Dernière intervention 8 novembre 2007 - 17 avril 2007 à 16:18
 Yessine - 18 avril 2012 à 11:07
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
A voir également:

8 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
19 avril 2007 à 15:01
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 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
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.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018
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.
0
xjl Messages postés 232 Date d'inscription mardi 27 mars 2007 Statut Membre Dernière intervention 12 juin 2007 183
17 avril 2007 à 16:25
Salut,

tu devrais jeter un oeil à cette discussion:
html css

Bonne chance ! ;-)
0
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
17 avril 2007 à 16:27
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
krabs Messages postés 54 Date d'inscription samedi 27 janvier 2007 Statut Membre Dernière intervention 8 novembre 2007 20
17 avril 2007 à 16:33
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
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
17 avril 2007 à 22:16
C'est quoi toute ces balises b de partout ? Tu les as imbriqué °_°
0
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
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
18 avril 2007 à 17:58
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
-moz-border-radius: 10px 10px 10px 10px;

mouai ...

un "-moz-border-radius: 10px;" suffirait ;)
0
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618 > gryphus71
4 juin 2007 à 17:40
Je sais, la question n'est pas là.
0
il suffit de mettre sans moz
#idbalise{
border-radius: 10px;
}
0
Vivement le css 3 pour pouvoir utiliser le border-radius
0