Glossaire des propriétés CSS

II. Propriétés de mise en forme des boîtes▲

II-A. Dimensions des boîtes▲

II-A-1. Largeur | width▲

width : permet de définir la largeur d'un élément. La valeur peut être en px, %, ou encore auto, la valeur par défaut. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

width: 200px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .width {
        width: 200px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<div class="width">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>

II-A-2. Hauteur | height▲

height : idem que pour la largeur mais pour la hauteur. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | auto | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

height: 50px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .height {
        width: 200px;
        height: 50px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<div class="height">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>

II-A-3. Largeur minimale | min-width▲

min-width : permet de définir la largeur minimale sur un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez

min-width: 500px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .min-w {
        min-width: 500px;
        width: 10%;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<p class="min-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>

II-A-4. Largeur maximale | max-width▲

max-width : permet de fixer la largeur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | none | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez

max-width: 50px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .max-w {
        max-width: 50px;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<p class="max-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>

II-A-5. Hauteur minimale | min-height▲

min-height : permet de fixer la hauteur minimale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez

min-height: 200px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .min-h {
        min-height: 200px;
        width: 50%;
        border: 2px solid #696969;
        background-color: #93caff;
    }
</style>
<p class="min-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

II-A-6. Hauteur maximale | max-height▲

max-height : permet de fixer la hauteur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des marges, espacements et bordures.

Syntaxe : <length> | <percentage> | none | inherit

Compatibilité : IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez

max-height: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .max-h {
        max-height: 20px;
        width: 50%;
        border: 2px solid #696969;
        background-color: #93caff;
    margin-bottom: 50px;
    }
</style>
<p class="max-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat</p>

II-B. Marges extérieures▲

II-B-1. Marge externe en haut | margin-top▲

margin-top : permet de définir la marge externe en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

Sélectionnez

margin-top: 20px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .m-top1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }
 
    .m-top2 {
        background-color: yellow;
    }
 
    .m-top3 {
        margin-top: 20px; background-color: yellow;
    }
</style>
<div class="m-top1">
    <div class="m-top2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-2. Marge externe à gauche | margin-left▲

margin-left : permet de définir la marge externe à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

margin-left: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .m-left1 {
        border: 1px solid black;
        background-color: red;
        width: 420px;
    }
 
    .m-left2 {
        width: 200px;
        float: left;
        background-color: yellow;
    }
 
    .m-left3 {
        width: 200px;
        float: left;
        margin-left: 20px;
        background-color: yellow;
    }
</style>
<div class="m-left1">
    <div class="m-left2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="clear"></div>
</div>

II-B-3. Marge externe à droite | margin-right▲

margin-right : permet de définir la marge externe à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

margin-right: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .m-right1 {
        border: 1px solid black;
        background-color: red;
        width: 420px;
    }
 
    .m-right2 {
        width: 200px;
        float: left;
        margin-right: 20px;
        background-color: yellow;
    }
 
    .m-right3 {
        width: 200px;
        float: left;
        background-color: yellow;
    }
</style>
<div class="m-right1">
    <div class="m-right2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="clear"></div>
</div>

II-B-4. Marge externe en bas | margin-bottom▲

margin-bottom : permet de définir la marge externe en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <margin-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

margin-bottom: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .m-bottom1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }
 
    .m-bottom2 {
        margin-bottom: 20px;
        background-color: yellow;
    }
 
    .m-bottom3 {
        background-color: yellow;
    }
</style>
<div class="m-bottom1">
    <div class="m-bottom2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-5. Marge externe | margin▲

margin : permet de définir en une seule fois les marges externes de tous les côtés d'un élément. Les valeurs négatives sont autorisées.

Syntaxe : <margin-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;
trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;
quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Sélectionnez

margin: 20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .margin1 {
        border: 1px solid black; 
        background-color: red;
        width: 800px;
    }
 
    .margin2 {
        background-color: yellow;
    }
 
    .margin3 {
        margin: 20px 5px;
        background-color: yellow;
    }
 
    .margin4 {
        background-color: yellow;
    }
</style>
<div class="margin1">
    <div class="margin2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="margin3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="margin4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-C. Espacements▲

II-C-1. Espacement en haut | padding-top▲

padding-top : permet de définir l'espacement interne en haut d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

padding-top: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .p-top1 {
        background-color: red;
        width: 800px;
    }
 
    .p-top2 {
        padding-top: 20px;
        background-color: red;
        border: 1px solid black;
    }
 
    .p-top3 {
        background-color: yellow;
    }
</style>
<div class="p-top1">
    <div class="p-top2">
        <div style="p-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-2. Espacement à gauche | padding-left▲

padding-left : permet de définir l'espacement interne à gauche d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

padding-left: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .p-left1 {
        background-color: red;
        width: 800px;
    }
 
    .p-left2 {
        padding-left: 20px;
        background-color: red;
        border: 1px solid black;
    }
 
    .p-left3 {
        background-color: yellow;
    }
</style>
<div class="p-left1">
    <div class="p-left2">
        <div class="p-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-3. Espacement à droite | padding-right▲

padding-right : permet de définir l'espacement interne à droite d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

padding-right: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .p-right1 {
        background-color: red;
        width: 800px;
    }
 
    .p-right2 {
        padding-right: 20px;
        background-color: red;
        border: 1px solid black;
    }
 
    .p-right3 {
        background-color: yellow;
    }
</style>
<div class="p-right1">
    <div class="p-right2">
        <div class="p-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-4. Espacement en bas | padding-bottom▲

padding-bottom : permet de définir l'espacement interne en bas d'un élément. Plusieurs unités sont possibles pour cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

padding-bottom: 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .p-bottom1 {
        background-color: red;
        width: 800px;
    }
 
    .p-bottom2 {
        padding-bottom: 20px;
        background-color: red;
        border: 1px solid black;
    }
 
    .p-bottom3 {
        background-color: yellow;
    }
</style>
<div class="p-bottom1">
    <div class="p-bottom2">
        <div class="p-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-C-5. Espacement tout-en-un | padding▲

padding : permet de définir en une seule fois l'espacement interne de tous les côtés d'un élément. Les valeurs négatives sont autorisées.

Syntaxe : <padding-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite ;
trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas ;
quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.

Sélectionnez

padding: 20px 5px 10px; /* 20px de marge en haut, 10px en bas, 5px à gauche et à droite */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .bottom1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }
 
    .bottom2 {
        padding: 20px 5px 10px;
        background-color: red;
    }
 
    .bottom3 {
        background-color: yellow;
    }
</style>
<div class="bottom1">
    <div class="bottom2">
        <div class="bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
        sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>

II-D. Bordures▲

Pour les propriétés de cette partie suivies d'un astérisque (border*), il est possible de définir plus précisément l'effet voulu en "combinant" les noms de propriétés.
Exemples :

Sélectionnez

border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

II-D-1. Épaisseur de la bordure | border-width*▲

border-width : permet de définir l'épaisseur du trait.

Syntaxe : <border-width>{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

une valeur : bordure égale pour les quatre côtés ;
deux valeurs : la première correspond à l'épaisseur pour le haut et le bas, la seconde pour la gauche et la droite ;
trois valeurs : la première correspond à l'épaisseur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
quatre valeurs : respectivement l'épaisseur du haut, de la droite, du bas, de la gauche.

Sélectionnez

border-width: 5px 1px 3px 0;
border-color: black;
border-style: solid;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .border-w {
        border-width: 5px 1px 3px 0;
        border-color: black;
        border-style: solid;
        background-color: #93caff;
    }
</style>
<p class="border-w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-D-2. Couleur de la bordure | border-color*▲

border-color : permet de définir la couleur de la bordure.

Syntaxe : [ <color> | transparent ]{1,4} | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Notes : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit. Internet Explorer 6 et précédents ne supportent pas la valeur transparent.

Version CSS : 1

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

une valeur : couleur unique pour les quatre côtés ;
deux valeurs : la première correspond à la couleur pour le haut et le bas, la seconde pour la gauche et la droite ;
trois valeurs : la première correspond à la couleur du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
quatre valeurs : respectivement la couleur du haut, de la droite, du bas, de la gauche.

Sélectionnez

border-width: 5px 2px 3px 4px;
border-color: black red blue green;
border-style: solid;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .border-color {
        border-width: 5px 2px 3px 4px;
        border-color: black red blue green;
        border-style: solid;
        background-color: #93caff;
    }
</style>
<p class="border-color">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-D-3. Type de bordure | border-style*▲

border-style : permet de définir le style de bordure.

Syntaxe : <border-style>{1,4} | inherit

Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : les valeurs inherit et hidden ne sont pas supportées par IE 8 et précédents.

Version CSS : 1

none : pas de bordure ;
hidden : bordure cachée, l'espace de bordure est apparent contrairement à none ;
solid : ligne pleine ;
double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
dashed : tirets ;
dotted : pointillés ;
inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
groove : autre effet 3D double bordure (dépend de la couleur de la bordure).

Sélectionnez

border-color: black;
 
border-style: none;
border-style: hidden
border-style: solid;
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: outset;
border-style: ridge;
border-style: groove;

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .b-style1 {
        border-color: black;
        border-style: solid;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style2 {
        border-color: black;
        border-style: double;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style3 {
        border-color: black;
        border-style: dashed;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style4 {
        border-color: black;
        border-style: dotted;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style5 {
        border-color: black;
        border-style: inset;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style6 {
        border-color: black;
        border-style: outset;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style7 {
        border-color: black;
        border-style: ridge;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }
 
    .b-style7 {
        border-color: black;
        border-style: groove;
        border-width: 5px;
        margin-bottom: 10px;
        background-color: #93caff;
    }
</style>
<div class="b-style1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="b-style8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-4. Bordure à gauche | border-left*▲

border-left : indique la couleur, l'épaisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-left-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

border-left: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .b-left {
        border-left: 2px dotted red;
        width: 70%;
        background-color: #93caff;
    }
</style>
<div class="b-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-5. Bordure en haut | border-top*▲

border-top : indique la couleur, l'épaisseur et le type de bordure pour la bordure en haut. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-top-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

border-top: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .b-top {
        border-top: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="b-top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-6. Bordure à droite | border-right*▲

border-right : indique la couleur, l'épaisseur et le type de bordure pour la bordure à droite. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-right-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

border-right: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .b-right {
        border-right: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="b-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-7. Bordure en bas | border-bottom*▲

border-bottom : indique la couleur, l'épaisseur et le type de bordure pour la bordure en bas. L'ordre n'a pas d'importance.

Syntaxe : [ <border-width> || <border-style> || 'border-bottom-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

border-bottom: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .b-bottom {
        border-bottom: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="b-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-8. Bordure tout-en-un | border*▲

border : permet de définir la bordure en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.

Syntaxe : [ <border-width> || <border-style> || 'border-color' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

border: 2px dotted red; /* Bordure en pointillé rouge de 2px */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .border {
        border: 2px dotted red;
        width: 60%;
        background-color: #93caff;
    }
</style>
<div class="border">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-9. Bordure arrondie | border-radius▲

border-radius : permet d'arrondir les angles

Syntaxe : <valeur>{1,4} / <valeur>{1,4}

Compatibilité : IE 9+, FF 4+, Chrome 0.2+, Safari 5+, Opera 6+

Version CSS : 3

Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :

une valeur : angle unique pour les quatre côtés ;
deux valeurs : la première correspond à l'angle pour le haut et le bas, la seconde pour la gauche et la droite ;
trois valeurs : la première correspond à l'angle du haut, la seconde pour la gauche et la droite, la troisième pour le bas ;
quatre valeurs : respectivement : l'angle du haut, de la droite, du bas, de la gauche.

Complément d'information : Les bordures en CSS 3.

Sélectionnez

border-radius: 5px 10px 0 15px;
background-color: yellow;
border: 1px solid red;
padding: 5px; /* Pour éviter que le texte déborde des bordures arrondies */

Voir le code source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .border-radius {
        border-radius: 5px 10px 0 15px;
        background-color: yellow;
        border: 1px solid red;
        padding: 5px; width: 60%;
    }
</style>
<div class="border-radius">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum</div>

II-D-10. Ombre | box-shadow▲

box-shadow : permet d'ajouter un ombrage sur un élément.

Syntaxe : none | [, ]* <ombre> | inherit ou <ombre> [ <couleur>? <length> <longueur> <longueur>? <longueur>? | <longueur> <longueur> <longueur>? <longueur>? <couleur>? ] (source : MDN)

Compatibilité : IE 9+, FF 4+, Chrome 10+, Safari 4+, Opera 10.5+

Version CSS : 3

Explications sur la syntaxe (source : Créer des effets étonnants avec la propriété CSS3 box-shadow) :

une valeur positive pour le décalage horizontal décale l'ombre vers la droite, une valeur négative vers la gauche ;
une valeur positive pour le décalage vertical décale l'ombre vers le bas, une valeur négative vers le haut ;
vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou s'étale ;
une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions, une valeur négative entraine une contraction ;
la couleur est celle de l'ombre ;
la propriété inset indique une ombre interne plutôt qu'externe.

Sélectionnez

box-shadow: 2px 2px 4px black;
box-shadow: 2px 2px 4px black inset;
box-shadow: 3px 3px 10px 1px #7b7b7b;

Note :

[X]

Note :

[X]

Voir le code source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .box1 {
        width: 200px;
        height: 100px;
        background-color: yellow;
        box-shadow: 2px 2px 4px black;
        position: relative;
        margin-bottom: 10px;
    }
 
    .box2 {
        position: absolute;
        top: 1px;
        left: 1px;
        font-style: italic;
        font-weight: bold;
    }
 
    .box3 {
        position: absolute;
        top: 1px;
        right: 1px;
    }
 
    .box4 {
        width: 200px;
        height: 100px;
        background-color: yellow;
        box-shadow: 2px 2px 4px black inset;
        position: relative;
        margin-bottom: 10px;
    }
 
    .box5 {
        position: absolute;
        top: 3px;
        left: 5px;
        font-style: italic;
        font-weight: bold;
    }
 
    .box6 {
        position: absolute;
        top: 3px;
        right: 1px;
    }
 
    .box7 {
        box-shadow: 3px 3px 10px 1px #7b7b7b;
        border: 1px solid #cecdcd;
        background-color: white;
        width: 80px;
        height: 80px;
    }
</style>
<div class="box1">
    <div class="box2">Note :</div>
    <div class="box3">[X]</div>
</div>
<div class="box4">
    <div class="box5">Note :</div>
    <div class="box6">[X]</div>
</div>
<div class="box7"></div>

II-E. Contours▲

Les contours permettent d'entourer un élément. Bien que similaires aux bordures, ils diffèrent sur certains points :

ils n'augmentent pas l'espace utilisé par l'élément mais se positionnent par dessus le contenu (voir exemple) ;
ils ne sont pas nécessairement rectangulaires, bien que la plupart des navigateurs ne respectent pas la spécification (et dessinent des contours rectangulaires) ;
on ne peut pas définir de contour spécifique à chaque côté ;
en cas de saut de ligne, le contour n'est pas coupé, il est fermé en fin de ligne et ouvert à la ligne suivante, donnant visuellement deux contours.

Exemple :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .outline-w-p {
        outline-width: thick;
        outline-color: gold;
        outline-style: solid;
        outline-offset: 5px;
        border: 3px solid black;
        background-color: #93caff;
        padding: 0.8em;
        width: 80%;
        margin: 10px auto 20px;  /* Évite de chevaucher le cadre de code */
    }
    .outline-w-span {
        outline-width: 0.8em;
        outline-color: silver;
        outline-color: rgba(214,214,214,0.8);
        outline-style: solid;
    }
</style>
<p class="outline-w-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore <span class="outline-w-span">magna aliqua.<br />Ut enim</span> ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

II-E-1. Épaisseur du contour | outline-width▲

outline-width : permet de définir l'épaisseur du trait.

Syntaxe : thin | medium | thick | <longueur> | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : Les valeurs prédéfinies dépendent de l'agent utilisateur, néanmoins, les valeurs habituelles sont de 1px pour thin, 3px pour medium et 5px pour thick.

Version CSS : 2.1

Le contour est placé en avant du contenu, cachant éventuellement une partie de ce dernier comme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-même un élément et ne masque pas réellement les éléments qui sont en-dessous. Notamment, les liens restent cliquables ou le texte sélectionnable.

Exemples :

Sélectionnez

outline-width: thin;
outline-width: 0.2em;
outline-width: 4px;

II-E-2. Couleur du contour | outline-color▲

outline-color : permet de définir la couleur du contour.

Syntaxe : <couleur> | invert | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Notes.
La valeur invert (qui est pourtant la valeur par défaut) n'est pas supportée par Chrome, Opera 15+ et Safari et a été abandonnée par Firefox 3.0+.
Pour les navigateurs ne supportant pas invert, la valeur par défaut correspond à la valeur calculée pour color.

Version CSS : 2.1

Exemples :

Sélectionnez

outline-color: green;
outline-color: #93caff;
outline-color: rgba(127, 218, 54, 0.8);

II-E-3. Type de contour | outline-style▲

outline-style : permet de définir le style du contour.

Syntaxe : <outline-style> | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : même si elle est peu appliquée, la spécification prévoit que le contour doit s'adapter aux débordements éventuels du contenu et peut ne pas être rectangulaire (Opera 12 et inférieurs respecte la spécification).

Version CSS : 2.1

none (par défaut) : pas de bordure ;
solid : ligne pleine ;
double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
dashed : tirets ;
dotted : pointillés ;
inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
groove : autre effet 3D double bordure (dépend de la couleur de la bordure).

Exemples :

Sélectionnez

outline-style: none;
outline-style: solid;
outline-style: double;
outline-style: dashed;
outline-style: dotted;
outline-style: inset;
outline-style: outset;
outline-style: ridge;
outline-style: groove;

II-E-4. Décalage du contour | outline-offset▲

outline-offset : permet de décaler les limites du contour.

Syntaxe : <longueur> | inherit

Compatibilité : IE, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 9.5+

Note : par défaut, le contour est collé aux limites de l'élément, si offline-offset est différent de 0, un espacement transparent est créé entre l'élément et le contour (si la valeur est négative, le contour est contracté à l'intérieur de l'élément).

Version CSS : 3

Exemples :

Sélectionnez

outline-offset: 0;
outline-offset: 5px;
outline-offset: -5px;
outline-offset: 0.4em;

II-E-5. Contour tout-en-un | outline▲

outline : permet de définir le contour en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.

Syntaxe : [ <outline-width> || <outline-style> || <outline-color> ] | inherit

Compatibilité : IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note : la propriété outline-offset ne peut pas être intégrée à la propriété raccourcie outline.

Version CSS : 2.1

Exemples :

Sélectionnez

outline: thin dotted blue;
outline: solid #FFD700;
outline: 6px double;

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.