Arrondir les bords avec html

echec_math Messages postés 8 Date d'inscription   Statut Membre Dernière intervention   -  
 Utilisateur anonyme -
Bonjour à tous,


Je suis en pleine création d'une page web avec html et pour un besoin d'ergonomie j'ai veux arrondir les bordures de la table que j'ai créée. J'espère qu'il y a une fonction qui fait cette transformation et qu'un membre de la communauté a déjà utilisé.

merci de m'aider.

2 réponses

justoo76 Messages postés 186 Date d'inscription   Statut Membre Dernière intervention   13
 
Bonjour, le moyen le plus générique de faire des bordures arrondies est l'utilisation d'images.

Maintenant c'est vrai qu'ils existe certaines fonctions CSS, mais relative à certains navigateurs.
Exemple :

{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 50px;
}

marchera que sous firefox
0
LelLex Messages postés 1628 Date d'inscription   Statut Membre Dernière intervention   112
 
C'est faux, Safari utilise le préfixe -webkit- donc ça fonctionne pour lui. Quand à Firefox, il utilise, comme son nom l'indique, le préfixe -moz- . Concernant Google Chrome et Opera, il utilise la propriété basique je pense. Puis pourquoi pas : -khtml- pour Linux : apparemment !

Donc, si tu mets :
{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
}

C'est okay pour tout le monde, sauf : Internet Explorer. Enfin, comme d'habitude. ;)

Voilà un lien intéressant : https://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html .

Bonne continuation.
-1
justoo76 Messages postés 186 Date d'inscription   Statut Membre Dernière intervention   13
 
oui mais sa rejoint mon idée a savoir que pour plus de généricité, il vaut mieux le faire en image
0
LelLex Messages postés 1628 Date d'inscription   Statut Membre Dernière intervention   112
 
Oui, mais tu as dit que ça marche que sous Firefox alors que tu mets le préfixe -webkit- qu'utilise Safari.

Après pour IE il y a la méthode Javascript Roudies dont Alsacréations parle dans le lien.
0
Utilisateur anonyme
 
d'accord avec LelLex
les prefixes marchent parfaitement bien
et le script roundies aussi pour IE (voir lien de LelLex)

je l'utilise
et mes blocs sont arrondis sous tous les navigatuers que j'ai essayés
a savoir, (IE8, IE7, firefox, safarie, opera, chrome, konqueror)

voila
0