Dans ce tuto CSS en vidéo, vous apprendrez à utiliser CSS 3 et sa propriété border-radius pour arrondir le coin des images ou encore des champs de formulaires.

Jetez un oeil à ces autres tuto CSS 3

10 astuces CSS pour faciliter l'intégration VOLUME 210 astuces CSS pour faciliter…
Dans cette formation CSS volume 2, nous allons découvrir 10…

Apprendre le Responsive DesignApprendre le Responsive Design…
Dans cette formation Responsive Design signée Elephorm, vous…

Teaser de la formation avec Thierry AudouxTeaser de la formation avec…

Qu'est-ce que le Responsive Web Design ?Qu'est-ce que le Responsive…

Créer un site One Page complet de A à ZCréer un site One Page complet…
Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Menu déroulant intelligent en full CSS 3Menu déroulant intelligent…
Avec ce tuto CSS 3, apprenez à réaliser un menu déroulant…

Montage HTML/CSS d’une maquette graphique sur DreamweaverMontage HTML/CSS d’une maquette…
Voici une formation dédiée à la découpe et au montage HTML…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS 3 de 9 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

simpledev , formateur certifié



Toutes les formations de Simpledev


Témoignage des clients de simpledev

Tutoriel clair et précis. Continuez ainsi :)

Tuto sur le codeigniter excellent par contre existe t il un tuto sur la création d'un back office avec codeigniter. Si oui, je suis fortement intéressée...

Superbes tutos pour apprendre Laravel ! Continue comme ça :D

Merci beaucoup pour tes tutorial que j'adore :D

Très bon formateur de bonne qualité. J'aime.

Lire les autres témoignages

 

D'autres tuto de simpledev

La fonction extract ()La fonction extract ()
 Dans ce tuto Php en vidéo, vous apprendrez à vous servir de la fonction extract ()…

Introduction à PDO pour se connecter à MySQLIntroduction à PDO pour se connecter à MySQL
Dans ce tuto en video, vous apprendrez à vous connecter à Mysql avec l'extension PDO…

Validation de formulaireValidation de formulaire
Dans ce tuto Jquery en vidéo, nous verrons comment vérifier et valider côté client,…

PDO et les requêtes préparéesPDO et les requêtes préparées
Dans ce tuto PHP en vidéo, vous apprendrez à utiliser l'extension PDO de PHP, et les…

voir tous les tuto de simpledev

Notes attribuées par les utilisateurs (24 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (22)

par comixtara voté :
(a téléchargé ce tuto - 16 février 2013)

" Excellent. C'est juste dommage pour le son, qui n'est pas à la hauteur. Mais sinon, très bien. "

par cook28a voté :
(a téléchargé ce tuto - 06 janvier 2012)

" tuto intéressant "

par Davidra voté :
(a téléchargé ce tuto - 04 novembre 2011)

" Très bon tuto simple... "

par vimagea voté :
(a téléchargé ce tuto - 26 octobre 2011)

" Merci "

par BlaCkMaRe90a voté :
(a téléchargé ce tuto - 25 octobre 2011)

" Super, justement se que je cherchais comme effet. merci "

par mblanca voté :
(a téléchargé ce tuto - 19 octobre 2011)

" clair, précis, illustré ! "

par oona
(a téléchargé ce tuto - 08 juillet 2011)

" h "

par simpledev
(auteur de ce tuto - 07 mai 2011)

" @Papy26
Ah oui j'oubiai, pour que ça fonctionne, il faut que ton image aie une bordure, donc ça te donnerait un code du genre
img{
border: solid 1px #222;
border-radius: 7px;
}

petite astuce si tu veux pas de bordure apparente, met la même couleur pour ta bordure que le fond de la page, t'aura des coins arrondis sur ton image et pas de bordure:) "

par simpledev
(auteur de ce tuto - 07 mai 2011)

" @Papy26
Et bien il suffit de styliser ton image dans ton fichier css.
Par exemple
img{
border-radius: 7px;
}

voilà c'est tout. "

par Papy26
(a téléchargé ce tuto - 07 mai 2011)

" Bonjour

Bravo pour ce tuto. C'est ce qu'il me fallait. Mais, je voudrais tester sur une image ou une photo. Comment faire sans passer par les div et autres...

Merci d'avance
Cordialement "

par graphiweb1
(a téléchargé ce tuto - 11 mars 2011)

" moi j'ai mis border-radius: 10px; pour ma ma part sous IE8 sa a marcher

Pour IE7 je ne sais pas :)
voila cordialement "

par larboua voté :
(a téléchargé ce tuto - 24 février 2011)

" tutoriel tres interressant,
merci beaucoup pour ce partage de connaissances,

cordialement,............ "

par larboua voté :
(a téléchargé ce tuto - 24 février 2011)

" super infos et tutoriel tres interressant..........
juste une question?
Pourquoi ne pas utilisé les spry(nom, validation, etc ) de dreamweaver?
Merci beaucoup car j'ai appris avec le webkit........
Cordialement,........ "

par simpledev
(auteur de ce tuto - 17 décembre 2010)

" La solution c'est que tout les internautes du monde fassent comme moi : Arrêter d'utiliser IE
Ou alors changer l'équipe de développement du navigateur chez Microsoft.... :)
Y'a plein de solutions radicales, mais sinon sans rêver, je pense qu'il faut passer par Javascript (ou photoshop) pour modifier l'apparence des coins sur IE. "

par JoFolio
(a téléchargé ce tuto - 17 décembre 2010)

" Effectivement sur http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html une méthode existe pour IE. Cependant seuls les champs input sur IE7 fonctionne avec cette méthode.. IE8 ne fonctionne pas.

Si quelqu'un à une solution je suis preneur ;)
"

par adp2i
(a téléchargé ce tuto - 01 octobre 2010)

" Merci pour ce tuto mais pour IE il y a une solution ? "

par kary
(a téléchargé ce tuto - 09 août 2010)

" salut,
ce tutoriel n 'est pas valable pour l'explorer

"

par Raphael76proda voté :
(a téléchargé ce tuto - 17 mai 2010)

" Merci beaucoup.
C'était justement ce dont j'avais besoin.
;)
"

par ketsio
(a téléchargé ce tuto - 08 avril 2010)

" Je connaissais déja (avec même plus de valeur avant le border-radius) mais j'ai laissé tomber car ça ne marche pas avec internet explorer et malheureusement trop de monde l'utilise. "

par simpledev
(auteur de ce tuto - 30 mars 2010)

" Bonjour Philippe, malheureusement internet explorer ne prend pas encore en compte cette propriété CSS 3, cependant il existe une astuce en javascript qui s'appelle "Roundies", c'est un peu long à expliquer mais tu trouveras des explications à cette adresse : http://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html

Merci. "

par philibert
(a téléchargé ce tuto - 30 mars 2010)

" Bravo et merci ! pourriez-vous donner le code pour que cela fonctionne aussi sous explorer qui reste quand même très utilisé. Merci d'avance
Philippe "

par Aquene
(a téléchargé ce tuto - 30 mars 2010)

" Merci. Marie "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto CSS 3 d’une durée de 9 minutes a été téléchargé 1390 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 25 mars 2010 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto CSS Astuces.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !