Attribut Border-Image-Outset CSS

Table of Contents

Rôle de l’attribut border-image-outset en CSS3

L’attribut border-image-outset permet d’étendre la bordure au-delà du bord du conteneur HTML.

Cet attribut peut prendre plusieurs valeurs possibles :

  • 4 valeurs pour gérer les extensions des bordures séparément :
    border-image-outset: 10px 20px 10px 20px;
  • 3 valeurs : la quatrième valeur (bordure de gauche) a la même valeur que la deuxième valeur (bordure de droite) :
    border-image-outset: 10px 20px 10px;
  • 2 valeurs : la première pour les bordures haut-bas, la deuxième pour les bordures droite-gauche :
    border-image-outset: 10px 20px;
  • 1 même valeur pour les quatre bordures :
    border-image-outset: 10px;

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.borderImageWidth

Testez vous-même cet attribut

Utilisez Codepen.

Le code CSS

            body {
                padding: 10px;
            }
            div {
                background-color: silver;
                width: 310px;
                height: 100px;
                padding: 20px;
                border: solid 10px transparent;
                border-image-source: url(//tutowebdesign.com/images/border-image-css.jpg);
                border-image-outset: 20px;
                border-image-repeat: round;
                border-image-outset: 30px 40px;
                border-image-outset: 5px;
            }
        

Le code HTML

            <section></section>
            <div>Le développement web est l'art de créer et de maintenir des sites web, des applications web et d'autres solutions en ligne qui enrichissent notre expérience numérique.</div>
            <img src="https://tutowebdesign.com/images/border-image-outset-css.jpg" alt="">
        

Résultat

La bordure rouge représente les bords du conteneur HTML

Compatibilité

L’attribut border-image-outset est pris en charge par les versions récentes des principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut border-image-outset sont :

length
La distance par rapport au bord. La valeur par défaut est 0. Syntaxe : border-image-outset: 20px;
nombre
Valeur par défaut 1. Un nombre qui correspond à un multiple d’une largeur de bordure spécifiée. Syntaxe : border: 20px solid transparent; border-image-outset: 1 2;
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité. Syntaxe : border-image-outset: initial;
inherit
Hérite de la même propriété que l’élément parent. Syntaxe : border-image-outset: inherit;
Maxime GUINARD
Maxime GUINARD

Merci d'avoir lu cet article. Je suis un développeur web WordPress passionné, et j'ai créé ce contenu avec soin pour vous offrir des informations de qualité. Restez connectés pour plus de conseils et d'astuces !

Facebook
Twitter
LinkedIn

Un projet en tête ?