Wie kann ich einen CSS-Rand nur auf einer Seite festlegen?


73

Für eine bestimmte divmöchte ich nur einen Rand auf der linken, rechten, oberen oder unteren Seite anzeigen.

Derzeit habe ich Folgendes, das an allen Seiten eine Grenze setzt:

#testdiv {
   border: 1px solid;
}

Was muss ich tun, um nur auf der linken Seite einen Rand zu haben ?

Antworten:



22

Wenn Sie 4 Seiten separat einstellen möchten, verwenden Sie:

border-width: 1px 2em 5px 0; /* top right bottom left */
border-style: solid dotted inset double;
border-color: #f00 #0f0 #00f #ff0;

18
    div{
    border-left:solid red 3px;
    border-right:solid violet 4px;
    border-top:solid blue 4px;
    border-bottom:solid green 4px;
    background:grey;
    width:100px; height:50px
}

DEMO


11

Sie können den Rand für alle Ränder separat angeben, zum Beispiel:

#testdiv{
  border-left: 1px solid #000;
  border-right: 2px solid #FF0;
}

Sie können auch das Aussehen des Rahmens festlegen und einen separaten Stil für den oberen, rechten, unteren und linken Rand verwenden. zum Beispiel:

#testdiv{
  border: 1px #000;
  border-style: none solid none solid;
}


3
#testDiv{
    /* set green border independently on each side */
    border-left: solid green 2px;
    border-right: solid green 2px;
    border-bottom: solid green 2px;
    border-top: solid green 2px;
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.