• Bordure

    Je crois avoir déjà proposé quelque chose sur ce sujet mais ma dernière page m'a fait revenir sur la bordure, d'éléments, que l'on place côte à côte et où les bordures se cumulent; je m'explique en image.

     

     

     

     

    Dans cette boîte, 4 zones bordées d'une bordure continue rouge, de 4 px d'épaisseur.
    Les bordures externes font bien 4 px mais celles centrales font 2 fois 4px, ce qui peut être modifié, pour raison d'esthétique.
    On peut faire apparaitre une bordure sur chaque coté d'une zone ou image et ainsi, réduire les bordures centrales pour qu'elles apparaissent de la même épaisseur que celles externes.
    Dans notre exemple, les bordures externes resteront à 4px mais celles centrales passeront à 2 px..

     

     

     

     

    Les bordures externes et internes paraissent de même largeur même si, à l'intérieur, elles sont moitié des externes mais étant double...
    Ceci pour rappeler que chaque côté peut être bordé par une bordure d'un style différent.
    N'oublions pas, lorsque nous plaçons des éléments avec bordure, dans un cadre de dimension précise,  il faut tenir compte du total des bordures pour avoir les dimensions extérieures de cet élément:
    Largeur= contenu + bordure gauche + bordure droite.

     

    Cet exemple avec son code:
    <p id="p9">&nbsp;</p>
    <style><!--
    #p9{float:left; transform:translate(100px,10px); width:400px; height:300px; border-left:1px solid red; border-top:4px double brown; border-right:6px ridge green; border-bottom:8px dashed blue; background-color:#FFF8DC;}
    --></style>
    Chaque coté à une bordure particulière, repérée par border-left/border-top/border-right/border-bottom.
    Ce qui peut vous permettre une décoration type ombre, par exemple.