Css Border innen und aussen

Question

Kann ich einen CSS Border innen und aussen von einem Element anzeigen?

Answer 1

Du kannst border, outline und shadow kombinieren. Dem outline gibst du ein offset und der shadow ist der äusserste Rahmen.

.outline-border
{
   margin: 100px;
   
   width: 100px;
   height: 100px;
   background: lightblue;
   
   border: 5px solid red;
   
   outline: 5px solid yellow;
   outline-offset: -10px;

   box-shadow: -1px -1px 1px 5px green;
   
}

<div class="outline-border"></div>

JSFiddle Demo

Answer 2

Um einen inneren Rahmen um ein Element zu erstellen, kannst du die Eigenschaft border verwenden und eine positive Breite festlegen. Und um einen äußeren Rahmen zu erstellen, kannst du die Eigenschaft outline verwenden. Demo

<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: lightgray;
        margin: 20px;
        padding: 20px;
        /* Innerer Rahmen */
        border: 5px solid blue;
        /* Äußerer Rahmen */
        outline: 5px solid red;
    }
</style>