Arrondir les bords avec html
echec_math
Messages postés
10
Statut
Membre
-
Utilisateur anonyme -
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.
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.
A voir également:
- Html arrondir les bords
- Editeur html - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- Arrondir les bords d'une image powerpoint ✓ - Forum Photo numérique
- ARRONDIR les bords d'une VIDÉO ✓ - Forum Montage et acquisition vidéo
- Arrondir la bordure d'une image sous Word ✓ - Forum Word
2 réponses
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
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
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.
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.
