Comment créer un cadre intérieur d'une boîte en html?

Comment Créer un cadre intérieur d'une boîte en html?

Voir cette photo:

Comment créer un cadre intérieur d'une boîte en html?

OriginalL'auteur DigiMan | 2017-01-11

  1. 2

    Html:

    <div class="outerDiv">
    <div class="innerDiv">Content</div>
</div>

    CSS: 

    .outerDiv{
    background: #000;
    padding: 10px;
 }

 .innerDiv{
     border: 2px dashed #fff;
     min-height: 200px; //adding min-height as there is no content inside

 }

    OriginalL'auteur Taniya

  2. 2

    Veuillez jeter un oeil 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .box{ width:500px; height:200px; background:#000; border:2px solid #ccc;}
        .inner-border {
            border: 20px solid black;
            box-shadow: inset 0px 0px 0px 10px red;
            box-sizing: border-box; /* Include padding and border in element's width and height */
        }
        /* CSS3 solution only for rectangular shape */
        .inner-outline {
            outline: 10px solid red;
            outline-offset: -30px;
        }
    </style>
    </head>

    <body>
    <div class="box inner-border inner-outline"></div>
    </body>
    </html>

    OriginalL'auteur Hari Om Srivastava