CSS Border

CSS Border Teaser
jetzt liken

Übersicht von allen CSS Border Eigenschaften mit anschaulichen Demos.
Border Div Informationen

Border kurz

div {border: 2px solid #000;}

Border jede Seite einzelnd

div {
  border-top: 4px solid #000;
  border-right: 8px solid #fe6000;
  border-bottom: 4px solid #949494;
  border-left: 8px solid #009ee0;
}

Border Animation

div {
  border-top: 4px solid #000;
  border-right: 8px solid #fe6000;
  border-bottom: 4px solid #949494;
  border-left: 8px solid #009ee0;
  transition: 1s 0s border-bottom ease;
}
div:hover {
  border-bottom: 20px solid #949494;
}

Border Style

div.dotted {border-style: dotted;}
div.dashed {border-style: dashed;}
div.solid {border-style: solid;}
div.double {border-style: double;}
div.groove {border-style: groove;}
div.ridge {border-style: ridge;}
div.inset {border-style: inset;}
div.outset {border-style: outset;}
div.none {border-style: none;}
div.none {border-style: hidden;}
div.mix {border-style: dotted dashed solid double;}

Border Radius

div.radius {
  border-radius: 5px;
  border: 2px solid #000;
}
jetzt liken