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

Afficher des vidéos en Responsive DesignAfficher des vidéos en Responsive…
Dans ce tuto CSS en vidéo, nous verrons comment nous pouvons…

Créer une galerie d'images avec pagination sur WordPressCréer une galerie d'images…
Dans ce tuto WordPress, nous allons voir comment ajouter une…

Débuter en HTML5 - CSS3 - Javascript - Tome 1Débuter en HTML5 - CSS3 -…
Cette formation fait partie d'une série sur la programmation…

Créer un Sticky menu qui reste visible à tout instantCréer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, 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…

Ajouter une bulle d'info enrichie à votre siteAjouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…

Intégrer et Développer un site Web ecommerceIntégrer et Développer un…
Voici une formation complète dédiée à l'intégration et…

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é



En savoir plus sur simpledev


Témoignage des clients de simpledev

Très bon formateur et surtout une incroyable diversité de tuto dans le domaine du développement de site web. J'ai commencé par les tutos concernant le html 5 et CSS3. Ces derniers proposent des sujets très utiles pour dynamiser mon site

Excellents tutos, très bien expliqués. Les tutos de Simpledev sont très utiles. L'une des choses qui fait la richesses des tutos est le "mélange des langages de programmation". On peut ainsi réaliser des systèmes complexes, avec plusieurs langages !

Bref j'ai pas besoin de préciser très bon formateur :)

Excellent Formateur, 5/5 tout y-est: application, contenu, bon son, pédagogie, bonne image, j'ai beaucoup appris en 2 jours de tuto. Parmi les quelques tutoriels que j'ai vu c'est celui qui se démarque. Simpledev. Bravo à lui j'en redemande.

Quoi dire d'autre ? merci pour tout ;).

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 (23 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (21)

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

" tuto intéressant "

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

" Très bon tuto simple... "

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

" Merci "

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

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

par mblancà 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 larbouà voté :
(a téléchargé ce tuto - 24 février 2011)

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

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

par larbouà 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 Raphael76prodà 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é 1208 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 !