{"id":5377,"date":"2024-08-27T17:24:50","date_gmt":"2024-08-27T17:24:50","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/arrondir-bordures-css-border-radius\/"},"modified":"2024-11-11T16:35:53","modified_gmt":"2024-11-11T16:35:53","slug":"arrondir-bordures-css-border-radius","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/arrondir-bordures-css-border-radius\/","title":{"rendered":"5.9 Arrondir les Bordures en CSS : Utiliser border-radius"},"content":{"rendered":"\n\n\n<p><strong>Arrondir les Bordures en CSS<\/strong> est une technique utile pour ajouter des bordures arrondies \u00e0 divers \u00e9l\u00e9ments des pages web. Comprendre comment utiliser correctement la propri\u00e9t\u00e9 <strong>border-radius<\/strong> en CSS peut am\u00e9liorer l&rsquo;esth\u00e9tique et la convivialit\u00e9 de vos sites web. Apprenons comment appliquer des bordures arrondies et explorons des exemples pratiques de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>border-radius<\/strong> en CSS<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586332121?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>border-radius<\/code> en CSS permet de cr\u00e9er des coins arrondis pour n&rsquo;importe quel \u00e9l\u00e9ment HTML qui a une bordure. Vous pouvez arrondir chaque coin individuellement ou tous les coins simultan\u00e9ment pour obtenir des bordures circulaires ou ovales. Voici comment elle fonctionne :<\/p>\n\n\n\n<div class=\"code-sample\">\n  <pre><code>.example {\n  width: 200px;\n  height: 100px;\n  border: 2px solid #000;\n  border-radius: 10px; \/* Arrondir tous les coins *\/\n}<\/code><\/pre>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre la Propri\u00e9t\u00e9 border-radius<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>border-radius<\/code> permet de d\u00e9finir des coins arrondis pour les \u00e9l\u00e9ments. Elle accepte diff\u00e9rentes valeurs pour chacun des coins ou une valeur unique pour arrondir tous les coins de mani\u00e8re uniforme. Les valeurs peuvent \u00eatre donn\u00e9es en pixels (<code>px<\/code>), en pourcentage (<code>%<\/code>), ou en autres unit\u00e9s CSS. Voyons quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Arrondir tous les coins *\/\n.example1 {\n  border-radius: 15px;\n}\n\n\/* Arrondir seulement le coin sup\u00e9rieur gauche *\/\n.example2 {\n  border-top-left-radius: 15px;\n}\n\n\/* Arrondir plusieurs coins individuellement *\/\n.example3 {\n  border-top-left-radius: 10px;\n  border-top-right-radius: 20px;\n  border-bottom-right-radius: 30px;\n  border-bottom-left-radius: 40px;\n}\n\n\/* Utiliser des pourcentages *\/\n.example4 {\n  border-radius: 50%;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Application de border-radius \u00e0 Divers \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>border-radius<\/code> peut \u00eatre appliqu\u00e9e \u00e0 divers \u00e9l\u00e9ments tels que des <code>div<\/code>, des images, des boutons et plus encore. Voici quelques exemples de son utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!-- Application sur un div --&gt;\n&lt;div class=\"example\" style=\"border-radius: 20px;\"&gt;Div avec bordures arrondies&lt;\/div&gt;\n\n&lt;!-- Application sur une image --&gt;\n&lt;img src=\"example.jpg\" class=\"example\" style=\"border-radius: 50%;\" alt=\"Image circulaire\"&gt;\n\n&lt;!-- Application sur un bouton --&gt;\n&lt;button class=\"example\" style=\"border-radius:10px;\"&gt;Bouton Arrondi&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Formes Circulaires et Ovales<\/h3>\n\n\n\n<p>En utilisant la propri\u00e9t\u00e9 <code>border-radius<\/code> avec des pourcentages, vous pouvez facilement cr\u00e9er des formes circulaires et ovales. Voici comment vous pouvez transformer des \u00e9l\u00e9ments en cercles ou ovales :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.circle {\n  width: 100px;\n  height: 100px;\n  background-color: #4caf50;\n  border-radius: 50%;\n}\n\n.oval {\n  width: 150px;\n  height: 100px;\n  background-color: #f44336;\n  border-radius: 50%;\n}<\/code><\/pre>\n\n\n\n<p>Ensuite, vous pouvez utiliser ces classes pour cr\u00e9er des \u00e9l\u00e9ments de forme circulaire et ovale :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!-- \u00c9l\u00e9ments circulaires et ovales --&gt;\n&lt;div class=\"circle\"&gt;&lt;\/div&gt;\n&lt;div class=\"oval\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de border-radius<\/h3>\n\n\n\n<p>Pour approfondir l&rsquo;utilisation de <code>border-radius<\/code>, voici quelques exemples avanc\u00e9s montrant des designs plus complexes :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cartes avec Bordures Arrondies<\/h4>\n\n\n\n<p>Les cartes sont tr\u00e8s populaires dans le design moderne des interfaces utilisateur. Voici comment cr\u00e9er une carte avec des bordures arrondies :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"card\"&gt;\n  &lt;h2&gt;Titre de la Carte&lt;\/h2&gt;\n  &lt;p&gt;Contenu de la carte&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.card {\n  background-color: #fff;\n  border-radius: 15px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n  padding: 20px;\n  margin: 20px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Boutons avec Bordures Arrondies et Hover<\/h4>\n\n\n\n<p>Donner aux boutons un aspect plus attrayant est essentiel pour une bonne exp\u00e9rience utilisateur. Voici comment cr\u00e9er des boutons avec des bordures arrondies et ajouter un effet de transition au survol :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.rounded-button {\n  background-color: #008cba;\n  color: #fff;\n  padding: 10px 20px;\n  border-radius: 50px;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.rounded-button:hover {\n  background-color: #005f5f;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;button class=\"rounded-button\"&gt;Cliquez-moi&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Images Responsives avec Bordures Arrondies<\/h4>\n\n\n\n<p>Les images avec des bordures arrondies peuvent rendre un site web plus attrayant. Voici un exemple d&rsquo;images responsives avec des coins arrondis :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.responsive-img {\n  width: 100%;\n  height: auto;\n  border-radius: 15px;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;img src=\"example.jpg\" class=\"responsive-img\" alt=\"Image avec coins arrondis\"&gt;<\/code><\/pre>\n\n\n\n<p>Pour explorer davantage les techniques CSS, vous pouvez consulter des ressources de qualit\u00e9 telles que <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> pour une documentation exhaustive, ainsi que des tutoriels avanc\u00e9s disponibles sur des plateformes d&rsquo;apprentissage en ligne telles que <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En utilisant la propri\u00e9t\u00e9 <strong>border-radius<\/strong> en CSS, vous pouvez facilement ajouter des coins arrondis \u00e0 vos \u00e9l\u00e9ments, am\u00e9liorer l&rsquo;esth\u00e9tique de vos pages web, et cr\u00e9er des designs modernes et engageants. N&rsquo;h\u00e9sitez pas \u00e0 exp\u00e9rimenter avec diff\u00e9rentes valeurs de <code>border-radius<\/code> pour obtenir les effets souhait\u00e9s. Continuez \u00e0 explorer les possibilit\u00e9s offertes par CSS pour affiner vos comp\u00e9tences en design web. Pour des tutoriels plus d\u00e9taill\u00e9s sur CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css3-avanc\u00e9\/151\">cours avanc\u00e9 sur CSS3<\/a>. Pour d&rsquo;autres sujets li\u00e9s \u00e0 la mise en forme, voyez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">les bases de la syntaxe CSS<\/a> ou explorez notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/positionner-elements-css-precisement\">le positionnement pr\u00e9cis des \u00e9l\u00e9ments en CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Arrondir les Bordures en CSS est une technique utile pour ajouter des bordures arrondies \u00e0 divers \u00e9l\u00e9ments des pages web. Comprendre comment utiliser correctement la&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2703,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5377"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5377\/revisions"}],"predecessor-version":[{"id":6040,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5377\/revisions\/6040"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2703"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}