Les éléments HTML sans style peuvent sembler fades et peu attrayants.
Cela peut entraîner une expérience utilisateur médiocre et un manque d’engagement.
Les bordures CSS offrent des options de personnalisation visuellement riches que cet article explore en profondeur.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction aux bordures CSS
Les bordures en CSS permettent d’encadrer, de styliser et de structurer visuellement les éléments HTML dans une page web en ajoutant un cadre autour d’eux. En CSS, elles offrent une grande flexibilité pour personnaliser l’apparence des éléments, y compris leur style (border-style), couleur (border-color), leur largeur (border-width) et même leur forme grâce au (border-radius). Dans ce chapitre, nous allons examiner en détail les propriétés des bordures, leurs variations, et leur utilisation.
Propriétés clés des bordures CSS
La propriété CSS border combine plusieurs propriétés :
- Border-width :définit l’épaisseur de la bordure, sa valeur initiale est medium. La largeur de la bordure peut prendre les valeurs en px, em, rem, ou mots-clés thin(fin), medium(moyenne), thick(épaisse) .
- border-style :Définit le style graphique de la bordure : plein, en pointillés, en tirets.Sa valeur par défaut est none, ce qui signifie que la bordure ne sera pas visible. Le style de la bordure valeurs comme solid (ligne pleine), dashed(points), dotted(tirets), none(aucune bordure), etc.
- border-color :Définit la couleur de la bordure, sa valeur initiale est la couleur du texte (currentColor). La couleur de la bordure prend comme valeurs , le nom de la couler :red , Valeur hexadécimale: #ff0000, ou Valeur RGB: rgb(255, 0, 0).
Syntaxe de la propriété border : border: [border-width] [border-style] [border-color];
Voici un exemple qui illustrent l’utilisation des bordures en CSS :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-ad0a0053-4a85-4548-8c95-7aa87b2f893b: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-ad0a0053-4a85-4548-8c95-7aa87b2f893b: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"ad0a0053-4a85-4548-8c95-7aa87b2f893b","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>Titre de la page</h1>
<p>paragraphe 1</p>
<p>paragraphe 2</p>
<div>
<p>paragraphe 3</p>
<p>paragraphe 4</p>
</div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"e850cd0aec","url":"https:\/\/blog.alphorm.com\/bordures-css-styles-utilisations-visuelles","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
CSS:
div {
background-color:pink;
width: 200px;
height: 100px;
border-width: 20px; /* Largeur de la bordure */
border-style: dashed; /* Style de la bordure */
border-color: red; /* Couleur de la bordure */
}
Vous pouvez également combiner toute les propriétés dans une seule ligne :
div {
background-color:pink;
width: 200px;
height: 100px;
border: 20px dashed red ; /* combiné toutes les propriétés */
}
Techniques avancées : border-radius CSS
- Border-radius :est utilisée pour arrondir les coins des bordures, particulièrement utile pour créer des cercles, des ellipses ou des formes arrondies. Elle prend comme unités ; pixels (px ) ou pourcentage (%) .
Voici des exemples qui illustrent l’utilisation de border-radius.
Pour usage uniforme : arrondir les coins de manières égales
div {
background-color:pink;
width: 200px;
height: 100px;
border: 20px dashed red ; /* combiné toutes les propriétés */
border-radius: 30px;
}
Pour créer des cercles ou des ellipses :
div {
background-color:pink;
width: 200px;
height: 100px;
border: 20px dashed red ; /* combiné toutes les propriétés */
border-radius: 50%;
}
Pour contrôler chaque coin séparément :
div {
background-color:pink;
width: 200px;
height: 100px;
border: 20px dashed red ; /* combiné toutes les propriétés */
border-top-left-radius: 15px; /* Coin supérieur gauche */
border-top-right-radius: 30px; /* Coin supérieur droit */
border-bottom-left-radius: 45px; /* Coin inférieur gauche */
border-bottom-right-radius: 20%; /* Coin inférieur droit */
}
- Différence entre border et outline :
Attention à ne pas confondre entre Les bordures et les contours (outline) en CSS. Les bordures occupent de l’espace autour d’un élément, modifiant sa taille, et permettent une personnalisation étendue (styles, couleurs, coins arrondis). Les contours, en revanche, sont dessinés en dehors de l’élément, ne modifient pas sa taille.
Voici un exemple :
div {
background-color:pink;
width: 200px;
height: 100px;
border: 20px dashed red ; /* combiné toutes les propriétés */
border-radius: 30px;
outline: 3px dotted black;
}
Vous pouvez modifier ou voir le code en cliquant sur ce lien :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment définir la largeur de bordure en CSS ?
Quels sont les styles de bordure disponibles ?
Comment arrondir les coins d'une bordure ?
Quelle est la différence entre border et outline ?
Comment combiner les propriétés de bordure en CSS ?
Conclusion
Les bordures CSS offrent une flexibilité incroyable pour le design web. Comment allez-vous intégrer ces techniques dans vos prochains projets ?
