Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Bordures arrondies

0 views
Skip to first unread message

Pascale

unread,
Apr 28, 2010, 5:38:18 AM4/28/10
to
Un problème qui paraîtra trivial pour beaucoup, j'imagine, mais je suis
très très perplexe.

Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
d'avoir un cadre rectangulaire.
Me référant à http://www.w3.org/TR/css3-background/#the-border-radius

je tente d'utiliser tout simplement la fonction border-radius.
J'ai donc un bout de CSS qui dit :

DIV.ann
{
font-weight: bold;
color: green; padding: 10px;
border: solid 5px green;
border-radius: 20px;
max-width: 700px;
margin: auto;
}

Le problème c'est que :
- Seul Opera semble comprendre ce border-radius, IE8 et FF ne le voient
pas, donc l'intérêt paraît assez réduit.
- W3C me couine dessus ! « La propriété border-radius n'existe pas en CSS
niveau 2.1. mais existe en : 20px 20px » (si je mets border-radius: 20px
20px, ça ne marche pas non plus).

Visiblement, j'ai raté quelque chose...

--
Pascale

Pascale

unread,
Apr 28, 2010, 6:07:01 AM4/28/10
to
Pascale <chaton.t...@alussinan.org> écrivait news:mouflette-
A918C...@la-grille-verte.net:

> Visiblement, j'ai raté quelque chose...

Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:

En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
l'icône « CSS valide » !

--
Pascale

SAM

unread,
Apr 28, 2010, 7:51:32 AM4/28/10
to
Le 4/28/10 12:07 PM, Pascale a �crit :
> Pascale <chaton.t...@alussinan.org> �crivait news:mouflette-
> A918C...@la-grille-verte.net:
>
>> Visiblement, j'ai rat� quelque chose...

Marche p� avec Opera 9.6

> Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:
>

> En attendant mieux, j'ai rajout� un -moz-border-radius pour qu'au moins
> l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai vir�
> l'ic�ne � CSS valide � !
>

et tu peux rajouter :

-khtml-border-radius: 20px;

pour Safari et autres webkit

J'aurais pourtant jur� que Safari.4 connaissait border-radius ? !

--
sm

docanski

unread,
Apr 28, 2010, 8:09:18 AM4/28/10
to
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Pascale ecrit ce qui suit en ce 28.04.2010 11:38 :

> Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
> d'avoir un cadre rectangulaire.

> je tente d'utiliser tout simplement la fonction border-radius.

> Le problème c'est que :
> - Seul Opera semble comprendre ce border-radius, IE8 et FF ne le voient
> pas, donc l'intérêt paraît assez réduit.

IE ne le voit effectivement pas et c'est normal : ce "navigateur" n'a
jamais été à la hauteur. Pour la majorité des navigateurs utilisant le
moteur gecko (attention : pas tous !), il suffit de faire un
-moz-border-radius avec la même valeur pour obtenir l'effet désiré.

> - W3C me couine dessus ! « La propriété border-radius n'existe pas en CSS
> niveau 2.1. mais existe en : 20px 20px » (si je mets border-radius: 20px
> 20px, ça ne marche pas non plus).
> Visiblement, j'ai raté quelque chose...

Si je ne me trompe, border-radius est prévu pour CSS3 ... qui est
annoncé depuis 3 ou 4 ans au moins. De toute façon, ne te préoccupe pas
des machins édités à Redmond, utilise tes border-radius comme si de rien
n'était mais en ajoutant le moz- qui ne sert actuellement qu'à forcer
l'utilisation de cette propriété sur les navigateurs de la famille
Mozilla tels FF et Seamonkey sous Mac et Ouindo$e, Epiphany, Galeon et
Iceweazel sous Linux.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

Bruno Baguette

unread,
Apr 28, 2010, 8:24:24 AM4/28/10
to
Le 28/04/10 11:38, Pascale a écrit :

> Un problème qui paraîtra trivial pour beaucoup, j'imagine, mais je suis
> très très perplexe.
>
> Je voudrais arrondir les coins d'une boîte, tout simplement, au lieu
> d'avoir un cadre rectangulaire.

Bonjour !

A ce sujet, la lecture de cet article devrait vous intéresser :
<http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html>

Très cordialement,

--
Bruno Baguette

Pierre-Alain Dorange

unread,
Apr 28, 2010, 8:25:05 AM4/28/10
to
SAM <stephanemor...@wanadoo.fr.invalid> wrote:

> > Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:

CSS 3 (non validé)
<http://www.w3.org/TR/css3-background/#border-radius>

> > En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
> > l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
> > l'icône « CSS valide » !


> >
>
> et tu peux rajouter :
>
> -khtml-border-radius: 20px;
> pour Safari et autres webkit

C'est à priori plutot -webkit-border-radius: 20px;

<http://www.css3.info/preview/rounded-border/>
<http://www.css3.info/border-radius-apple-vs-mozilla/>
<http://www.css3.info/modules/compatibility-table-backgrounds-and-border
s-module/>

Ca marche avec Safari...

--
Pierre-Alain Dorange <http://microwar.sourceforge.net/>

Ce message est sous licence Creative Commons "by-nc-sa-2.0"
<http://creativecommons.org/licenses/by-nc-sa/2.0/fr/>

Pascale

unread,
Apr 28, 2010, 8:30:35 AM4/28/10
to
SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4bd82145$0$27586$ba4a...@reader.news.orange.fr:

> Marche pô avec Opera 9.6

Mais avec Opera 10.51, si (:

> -khtml-border-radius: 20px;
>
> pour Safari et autres webkit

Oui, j'ai fait ça entretemps. J'ai rajouté

J'ai donc :
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;

> J'aurais pourtant juré que Safari.4 connaissait border-radius ? !

Je ne sais pas, je reconnais que je ne l'ai testé qu'une fois que j'ai eu
rajouté tout ça, donc difficile de dire si border-radius lui parle ou pas.
De toutes façons, je ne peux pas me permettre de ne tenir compte que des
toutes dernières versions.

J'ai essayé de trouver une solution pour IE, mais vu que je suis douée
comme une buse, ça a beau avoir l'air simple, j'ai quand même des
problèmes.
Je tente d'appliquer la solution d'Alsacréations :
http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-
images.html

qui utilise behavior: url(border-radius.htc);

J'ai donc maintenant :
border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
behavior: url(scripts/border-radius.htc);

J'ai téléchargé le fichier en question ici :
http://curved-corner.googlecode.com/files/border-radius.htc

Ça marche... si on veut... Les coins sont arrondis, mais ma div se retrouve
avec un horrible fond noir !
Dans l'exemple donné par Alsacréations, il n'y a bien sûr pas d'horrible
fond noir, et pourtant je ne vois pas de différence entre leur border-
radius.htc et le mien (je n'ai rien bricolé).

Pour mon info, c'est quoi, cette extension htc ? Des scripts spéciaux pour
IE ?

--
Pascale

Pascale

unread,
Apr 28, 2010, 8:45:52 AM4/28/10
to
docanski <docanski_...@euphonynet.be.invalid> écrivait
news:hr98i1$v2j$1...@obelix.gegeweb.org:

> IE ne le voit effectivement pas et c'est normal : ce "navigateur" n'a
> jamais été à la hauteur. Pour la majorité des navigateurs utilisant le
> moteur gecko (attention : pas tous !), il suffit de faire un
> -moz-border-radius avec la même valeur pour obtenir l'effet désiré.

Ben oui, IE, c'est... IE... mais on ne peut pas faire l'impasse dessus,
trop de gens l'utilisent, y compris des versions antédiluviennes.

> Si je ne me trompe, border-radius est prévu pour CSS3 ... qui est
> annoncé depuis 3 ou 4 ans au moins. De toute façon, ne te préoccupe
> pas des machins édités à Redmond, utilise tes border-radius comme si
> de rien n'était mais en ajoutant le moz- qui ne sert actuellement qu'à
> forcer l'utilisation de cette propriété sur les navigateurs de la
> famille Mozilla tels FF et Seamonkey sous Mac et Ouindo$e, Epiphany,
> Galeon et Iceweazel sous Linux.

Ben oui, mais si ça pouvait marcher AUSSI pour IE (au moins IE8),
j'aimerais mieux. Tout ça, c'est de la mise en forme, et on peut toujours
dire qu'on s'en fiche si un cadre est arrondi ou carré, mais bon, quand
même (:

--
Pascale

Sergio

unread,
Apr 28, 2010, 8:47:35 AM4/28/10
to
Bruno Baguette a écrit :

J'aime bien l'introduction :
"Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même."

Pourquoi les têtes d'œufs du W3C n'ont pensé à border-radius que pour les CSS3 ? Pour qu'on puisse reconnaître le "vrai" webmaster
qui sait bien trafiquer les CSS ?

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org

Pascale

unread,
Apr 28, 2010, 8:49:07 AM4/28/10
to
Bruno Baguette <bruno.b...@invalid.invalid> écrivait
news:hr99dn$307f$1...@cabale.usenet-fr.net:

> A ce sujet, la lecture de cet article devrait vous intéresser :
> <http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-ima
> ges.html>

Oui, d'ailleurs je suis tombée dessus en faisant mes petites recherches (-:
Me reste à comprendre pourquoi ce fichu border-radius.htc me donne un fond
noir.
Normalement, cette div n'a pas de fond particulier.

--
Pascale

SAM

unread,
Apr 28, 2010, 9:06:28 AM4/28/10
to
Le 4/28/10 2:25 PM, Pierre-Alain Dorange a écrit :

> SAM <stephanemor...@wanadoo.fr.invalid> wrote:
>
>>> Ou alors je suis en avance au niveau des CSS (pour une fois !) (-:
>
> CSS 3 (non validé)
> <http://www.w3.org/TR/css3-background/#border-radius>
>
>>> En attendant mieux, j'ai rajouté un -moz-border-radius pour qu'au moins
>>> l'arrondi soit visiblement avec les navigateurs Gecko... et j'ai viré
>>> l'icône « CSS valide » !
>>>
>> et tu peux rajouter :
>>
>> -khtml-border-radius: 20px;
>> pour Safari et autres webkit
>
> C'est à priori plutot -webkit-border-radius: 20px;

à priori, sans doute, mais -khtml fonctionne chez moi.
(même avec iCab.4)

> <http://www.css3.info/preview/rounded-border/>

et avec -webkit ça roule aussi (iCab Safari)

-khtml / -webkit même combat ?
une histoire de compatibilité ascendante ?

--
sm

Pascale

unread,
Apr 28, 2010, 9:09:43 AM4/28/10
to
SAM <stephanemor...@wanadoo.fr.invalid> écrivait
news:4bd832d6$0$2947$ba4a...@reader.news.orange.fr:

> -khtml / -webkit même combat ?
> une histoire de compatibilité ascendante ?

J'ai mis les 2. Ceinture et bretelles (-:

--
Pascale

Pierre-Alain Dorange

unread,
Apr 28, 2010, 10:11:51 AM4/28/10
to
Pascale <chaton.t...@alussinan.org> wrote:

> J'ai essayé de trouver une solution pour IE, mais vu que je suis douée
> comme une buse, ça a beau avoir l'air simple, j'ai quand même des
> problèmes.

A titre indicatif, IE9 (en préparation) semble intégrer au stade
"preview" des éléments de CSS3 et HTML5 dont le border-radius à priori :

<http://www.css3.info/internet-explorer-9-platform-preview-released/>

Par exemple :
<http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html>
qui focntionne avec Safari avec un petit artefact lors de l'animation
des border-radius...

Quand a savoir quand IE9 sortira et quand il sera adopté c'est une autre
histoire...
A titre indicatif, le W3Schools indique ces stats de visite (plutot
webmaster) et IE6, IE7 et IE8 y sont a peu près à égalité...

<http://www.w3schools.com/browsers/browsers_stats.asp>

Pascale

unread,
Apr 28, 2010, 10:43:01 AM4/28/10
to
pdor...@pas-de-pub-merci.mac.com (Pierre-Alain Dorange) écrivait
news:1jho0x8.qj9o6x10q7ixcN%pdor...@pas-de-pub-merci.mac.com:

> Quand a savoir quand IE9 sortira et quand il sera adopté c'est une autre
> histoire...
> A titre indicatif, le W3Schools indique ces stats de visite (plutot

> webmaster) et IE6, IE7 et IE8 y sont a peu prčs ą égalité...
>
> <http://www.w3schools.com/browsers/browsers_stats.asp>

Ēa ne m'étonne pas, hélas (surtout pour IE6 qui fait parfois des trucs
bizarres).

--
Pascale

Olivier Masson

unread,
Apr 29, 2010, 6:26:50 AM4/29/10
to
Le 28/04/2010 16:11, Pierre-Alain Dorange a �crit :

> Quand a savoir quand IE9 sortira et quand il sera adopt� c'est une autre


> histoire...
> A titre indicatif, le W3Schools indique ces stats de visite (plutot

> webmaster) et IE6, IE7 et IE8 y sont a peu pr�s � �galit�...
>
> <http://www.w3schools.com/browsers/browsers_stats.asp>

Dans la vraie vie, IE6 est bien en-dessous mais encore p�niblement
utilis� (principalement dans les entreprises, o� la navigation sur le
net est d'ailleurs souvent restreinte).

Quant � l'adoption d'IE9, elle d�pendra de la politique de MS mais s'ils
font comme pour IE8, c-a-d ne pas l'imposer via MS Update (maj
facultative), �a va prendre beaucoup de temps.

Pierre Goiffon

unread,
May 11, 2010, 8:05:47 AM5/11/10
to
On 29/04/2010 12:26, Olivier Masson wrote:
>> Quand a savoir quand IE9 sortira et quand il sera adopt� c'est une autre
>> histoire...

> Quant � l'adoption d'IE9, elle d�pendra de la politique de MS mais s'ils


> font comme pour IE8, c-a-d ne pas l'imposer via MS Update (maj
> facultative), �a va prendre beaucoup de temps.

Et IE9 n'�tant pas disponible pour XP, les choses risquent d'�tre encore
plus longues... il va falloir attendre le renouvellement de tout un parc
de machines...

0 new messages