Les "border" sont les bordures d'un élément permettant de le délimiter par rapport aux autres comme les boîtes que vous pouvez voir à l'accueil d'HabbDesign qui sont tous délimité grâce à une bordure qui est arrondi.
Nous allons voir ici comment utiliser cette propriété "border" de différente manière avec des styles et des effets spéciaux.
border-width /* épaisseur */
border-style /* style */
border-color /* couleur */
Voici les 2 différentes propriétés liés au "border" que nous allons d'abord étudier. Vous pouvez voir qu'il y a un texte entre "/*" et "*/" qui sert à délimiter une zone de "commentaire" que vous pouvez utiliser dans vos feuilles de styles pour mieux vous retrouver. Cette zone ne sera pas éxécuté par les navigateurs, elle ne sert que pour le codeur.
Donc comme il est écrit, le "border-width" sert à délimiter l'épaisseur de la bordure. Il doit prendre une valeur numérique en pixel (px) comme par exemple 1px.
Le "border-style" sert à donner le style de la bordure, c'est-à-dire que vous pourrez avoir des bordures en pointillet, en tiret ou autre. Cette propriété peut prendre les valeurs suivantes :
dotted (pointillé), dashed (tirets), solid (solide), double (double), groove (rainurée), ridge (relief), inset (relief intérieur), outset (relief extérieur).
Le "border-color" permet de donner une couleur à la bordure et prend donc comme valeur un code couleur en HTML comme par exemple #000000.
Il est possible de fusionner ces trois propriétés en une seule. En effet, ces trois propriétés peuvent être contracté et devenir "border" qui prendra tout d'abord comme valeur l'épaisseur, puis ensuite le style et enfin la couleur, le tout séparé par des espaces comme ceci :
border: 1px dotted #000000; /* width style color */
Maintenant vous savez comment faire des bordures de différentes épaisseurs, donc nous allons voir un effet que vous pouvez apporter à vos borders : l'effet de coin arrondi.
Pour cet effet, nous allons utiliser la propriété "border-radius" qui prend une valeur numérique en pixel (px).
border-top-left-radius /* coin en haut à gauche */
border-top-right-radius /* coin en haut à droite */
border-bottom-left-radius /* coin en bas à gauche */
border-bottom-right-radius /* coin en bas à droite */
Vous l'avez donc remarqué, il existe des sous-propriétés au "border-radius" qui permettent de contrôler les arrondis de chaque coin grave au "-top-" (haut), "-bottom-" (bas), "-left-" (gauche), "-right-" (droite).
Comme pour la première propriété que l'on a vu, celle-ci peut aussi se contracter en un seul "border-radius" : tout d'abord on met le coin en haut à gauche puis à droite, ensuite en bas à gauche puis à droite. Mais vous pouvez aussi ne mettre qu'une seule valeur pour que tous les coins ont le même arrondi.
border-radius: 5px 0 0 5px; /* top-left top-right bottom-left bottom-right */
Comme tout, cet effet à un inconvénient, il ne marche pas sur tous les navigateurs, c'est pourquoi il existe d'autre sous-propriétés permettant de le faire apparaître sur tous les navigateurs.
-webkit-border-radius: 5px; /* Chrome, Safari, Android... */
-moz-border-radius: 5px; /* Mozilla */
border-radius: 5px;
Voilà la fin de cet article, en espérant qu'il vous a été utile. Si vous avez un problème ou que vous voulez partager vos screens de bordure ou bien que vous voulez tout simplement donner un avis sur cet article, n'oubliez pas que la boîte à droite est faites pour ça, alors écrivez nous un commentaire!