La bordure CSS est une propriété clé utilisée pour caractériser et styliser les bordures autour des composants HTML. Les bordures jouent un rôle essentiel dans la composition du site Web, contribuant à créer une séparation, une mise en valeur et une allure élégante. En CSS, vous pouvez utiliser quelques propriétés liées aux bordures pour contrôler le style, la variété, la taille et la forme de ces bordures. Dans cet article, nous étudierons ces propriétés de bordure CSS et comment les utiliser réellement.
Propriétés de la bordure CSS
Les propriétés de bordure CSS sont utilisées pour déterminer le style, la variété, la largeur ainsi que le flux et le reflux des bordures d'un composant. Ces propriétés comprennent :
- style de bordure
- couleur de la bordure
- largeur de la bordure
- rayon de frontière
1) Style de bordure CSS
La propriété Style de bordure est utilisée pour spécifier le type de bordure que vous souhaitez afficher sur la page Web.
Certaines valeurs de style de bordure sont utilisées avec la propriété border-style pour définir une bordure.
rendre un script shell exécutable
| Valeur | Description |
|---|---|
| aucun | Cela ne définit aucune frontière. |
| pointé | Il est utilisé pour définir une bordure en pointillés. |
| en pointillé | Il est utilisé pour définir une bordure en pointillés. |
| solide | Il est utilisé pour définir une bordure solide. |
| double | Il définit deux bordures avec la même valeur de largeur de bordure. |
| rainure | Il définit une bordure rainurée 3D. l'effet est généré en fonction de la valeur de la couleur de la bordure. |
| crête | Il définit une bordure striée 3D. l'effet est généré en fonction de la valeur de la couleur de la bordure. |
| encart | Il définit une bordure en médaillon 3D. l'effet est généré en fonction de la valeur de la couleur de la bordure. |
| début | Il définit une bordure initiale 3D. l'effet est généré en fonction de la valeur de la couleur de la bordure. |
Exemple:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Sortir:
2) Largeur de bordure CSS
La propriété border-width est utilisée pour définir la largeur de la bordure. Il est défini en pixels. Vous pouvez également utiliser l'une des trois valeurs prédéfinies, fine, moyenne ou épaisse, pour définir la largeur de la bordure.
Remarque : La propriété border-width n'est pas utilisée seule. Il est constamment utilisé avec d'autres propriétés de bordure, comme la propriété « border-style » pour définir la bordure en premier, sinon cela ne fonctionnera pas.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Sortir:
3) Couleur de la bordure CSS
Il existe trois stratégies pour définir la couleur de la bordure.
- Nom : Il détermine le nom de la couleur. Par exemple : « rouge ».
- RVB : Il détermine la valeur RVB de la couleur. Par exemple : 'rgb(255,0,0)'.
- Hex : Il détermine la valeur hexadécimale de la couleur. Par exemple : « #ff0000 ».
Remarque : La propriété border-color n'est pas utilisée seule. Il est constamment utilisé avec d'autres propriétés de bordure, comme la propriété « border-style » pour définir la bordure en premier, sinon cela ne fonctionnera pas.
Exemple:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Sortir:
