• CSS - Les bordures

    Nous allons voir maintenant comment mettre une bordure autour de votre objet. Cet objet peut être un simple texte, une image, une table...

    Il y a trois propriétés distinctes pour définir une bordure. Ainsi qu'une propriété générique pour tout définir en une seule commande.


    border-width: valeur;
    border-top-width: valeur;
    border-right-width: valeur;
    border-bottom-width: valeur;
    border-left-width: valeur;

    Ces propriétés définissent la largeur de la bordure. Les valeurs possibles :

    une valeur en pixels
    thin
    medium
    thick

    Une valeur en pixels (px) est ce qu'il y a de plus pratique et de plus précis pour définir la largeur de la bordure.
    thin vous donnera une bordure fine.
    medium vous donnera une bordure moyenne.
    thick vous donnera une bordure épaisse.

    Vous pouvez définir séparément chaque côté de la bordure, ou en une seule fois.
    Si vous utilisez la propriété border-width, avec une seule valeur, vous aurez la même largeur de bordure sur les quatre côtés.
    Si vous l'utilisez avec quatre valeurs différentes, celles-ci seront prises en compte dans l'ordre suivant : top (haut), right (droite), bottom (bas) et left (gauche).

    Exemples :

    Code:
    border-top-width: 10px;
     
    border-bottom-width: 5px;
     
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 5px;
     
    border-width: 10px;
     
    border-width: 5px 5px 10px 5px;
    border-style: valeur;
    border-top-style: valeur;
    border-right-style: valeur;
    border-bottom-style: valeur;
    border-left-style: valeur;

    De la même manière que pour sa largeur, on définira ici le style de la bordure. Chaque côté séparément, ou les quatre côtés en une seule fois, identiques ou différents. Valeurs possibles :

    dashed
    dotted
    double
    groove
    hidden
    inset
    none
    outset
    ridge
    solid

    dashed vous donnera une bordure en petits tirets successifs.
    dotted vous donnera une bordure en points successifs.
    double vous donnera une bordure en ligne double.
    groove vous donnera une bordure en 3D.
    hidden vous donnera une bordure cachée (ou pas de bordure, quoi !)
    inset vous donnera une bordure en creux intérieur.
    none signifie pas de bordure. C'est la valeur par défaut.
    outset est le contraire d'inset et vous donnera une bordure en léger relief.
    ridge vous donnera une bordure en 3D (effet inverse de groove).
    solid vous donnera une bordure en une ligne continue, la plus usitée.

    Exemples :

    Code:
    border-top-style: solid;
     
    border-style: dashed;
     
    border-style: dashed dotted double solid;
    border-color: valeur;
    border-top-color: valeur;
    border-right-color: valeur;
    border-bottom-color: valeur;
    border-left-color: valeur;

    C'est avec cette propriété que l'on définit la ou les couleurs de la bordure. Cela fonctionne exactement pareil que pour les propriétés précédentes. Valeurs possibles :

    un nom de couleur
    une valeur hexadécimale
    un code RGB

    On a déjà vu comment fonctionnaient les couleurs dans les textes. Elles fonctionnent de la même manière ici.

    Exemples :

    Code:
    border-bottom-color: blue;
     
    border-color: #0000ff;
     
    border-color: red green blue yellow;
    Il est à noter que la propriété border-style doit être définie AVANT de définir la propriété border-color. En effet, il faut bien matérialiser la bordure avant de la coloriser.


    border: valeurs;
    border-top: valeurs;
    border-right: valeurs;
    border-bottom: valeurs;
    border-left: valeurs;

    Ici, c'est la propriété générique dont je parlais au début de cet article. Elle permet de définir les trois paramètres d'un seul coup. Mais là, il faut une seule valeur par propriété, qui sera appliquée sur les quatre côtés pour border, et sur un seul côté, mais en utilisant border-top, border-right, border-bottom et/ou border-left.

    Exemples :

    Code:
    border: 1px solid #ff0000;
     
    border-top: 2px dashed #ff0000;
    border-right: 2px dotted #00ff00;
    border-bottom: 2px double #0000ff;
    border-left: 2px solid #000000;
  • Donations Dons

    Si vous aimez ce site et que vous souhaitez nous supporter, vous pouvez effectuer un don. Tous les dons sont gracieusement acceptés.

    Indiquez la valeur souhaitée au format « xx.xx ».


    Sélectionnez votre monnaie et le montant du don que vous souhaitez effectuer, puis cliquez sur l'image ci-dessous.

  • Horloge

  • Calendrier

    Mars   2024
    Di Lu Ma Me Je Ve Sa
    1 2
    3 4 5 6 7 8 9
    10 11 12 13 14 15 16
    17 18 19 20 21 22 23
    24 25 26 27 28 29 30
    31
  • Derniers mods Derniers mods

    [Additions majeures] - vbBux &...
    - par Dadoo

    [Chat] - Demande de...
    - par lasilix

    [Portails] - vBadvanced...
    - par Dadoo

    [Additions majeures] - Librairie de...
    - par Dadoo

    [Additions majeures] - microNEWSLETTER...
    - par Dadoo

    [Additions majeures] - Tournois &...
    - par Dadoo

    [Additions majeures] - Clavier Virtuel
    - par Greggg

    [Outils d'administration] - Envoyer un...
    - par Greggg

    [Outils de modération] - Outils de...
    - par Greggg

    [Add-ons] - Copyright...
    - par Greggg