Faire des coins arrondis en CSS

Faire des coins arrondis en CSS

Arrondir les 4 coins

	-moz-border-radius: 6px;		/* pour Mozilla */
	-khtml-border-radius: 6px;		/* pour Safari et Chrome */
	-webkit-border-radius: 6px;		/* pour Safari sur Mac */
	border-radius: 6px;				/* CSS3 */


 

Arrondir chaque coin individuellement

	-moz-border-radius: 3px 6px 9px 12px;			/* pour Mozilla */
	-khtml-border-radius: 3px 6px 9px 12px;			/* pour Safari et Chrome */
	-webkit-border-radius: 3px 6px 9px 12px;		/* pour Safari sur Mac */
	border-radius: 3px 6px 9px 12px;				/* CSS3 */

/* Explication */
	border-radius: haut gauche - haut droit - bas droit - bas gauche

 

CSS

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

4 commentaires

  1. Merci, un petit tutoriel simple et compréhensible. En tout cas pour moi qui suis resté à faire des tableaux dans Dreamweaver et a découper les coins arrondis à partir de Photoshop. Bien plus léger comme méthode.

    Répondre
    • CSS est en effet bien moins lourd que les images: rapide à mettre en place et facilement modifiable. Je recommande de s’y intéresser quand on gère un site web.

      Répondre
  2. Bonjour MarieEve, merci pour cette astuce
    Grâce à vous mon site (ou plutôt son squelette) commence à ressembler à quelque chose ! Et le titre de votre site est génial ! Je vais vous suivre sur fb, .

    Répondre
    • Que de compliments, Merci Nadja! Ravie d’avoir pu t’aider. :)

      Répondre

Trackbacks/Pingbacks

  1. Les Doigts dans le Web #3 - Les Doigts dans le Net - [...] Faire des coins arrondis en CSS [...]

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint