Discussion :

[stefsas]

Bonjour,

Je voudrais réaliser un cadre avec une bordure rectangulaire en haut pour afficher un titre et avec les 4 coins arrondis. Je voudrais savoir si il avait une technique efficace qui permet de faire cela sans devoir passer par l'insertion d'images multiples et qui soit compatible avec l'ensemble des navigateurs.

Merci.

[Yorick]

Salut,
Ya pas de solutions miracle.

Soit tu passes par du javascript mais si il est désactivé : dommage.
Soit tu passes par la propriété border-radius* mais implémenté sur certains navigateurs seulement : donc dommage aussi. (*tu peux paramétrer les rayons de chaque coin indépendamment)

Ou alors la méthode lourdingue avec plein de div qui passe partout.

Enfin les arrondis c'est du pur esthétique. Si tu ne les as pas ce n'est pas ça qui fera fuir les visiteurs.
Donc perso j'utiliserai la solution CSS3.

[Invité]

je ferait la meme chose css3 surtout qu'il n'y a que ie qui ne le supporte pas se sera supporté sur ie 9

la syntaxe pour etre supporte par ff chrome safari et opera

Code :

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

1
2
3
4
5
6
7
8
 
-moz-border-radius : 20px 20px 0 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0;
-khtml-border-radius:20px 20px 0 0;
border-radius : 20px 20px 0 0;

[stefsas]

Ok mais sachant que mon but c'est de l'implémenter pour un logiciel en mode intranet qui va être utilisé sur diverses navigateurs, cela risque de ne pas aller.

[lazariel]

Il existe la solution du Roundies.js

[Yorick]

Ok mais sachant que mon but c'est de l'implémenter pour un logiciel en mode intranet qui va être utilisé sur diverses navigateurs, cela risque de ne pas aller.

intra ou inter c'est pareil, différents navigateurs et JS activé ou non.

Si tu veux absolument tes arrondis c'est la méthode "lourde".