CSS Border

Next ❯CSS Outline

Used to define the border effects on element

  • turned_in_notBackground Properties
    • border-style
    • border-width
    • border-color
    • border
    • border-top
    • border-bottom
    • border-left
    • border-right

Checkout the Border
h1 {
  border-style: dotted;
  border-width: 5px;
  border-color: black;
}
bordersubject
borderclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  border-style: dotted;
  border-width: 5px;
  border-color: black;
}
</style>
</head>
<body>
<h1>Checkout the Border</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    border-style:
    border-width:
    border-color:
  • turned_in_notBorder Sub Properties
    • Every properties are sub-divided further, used if required to style Individual sides
    • labelborder-style
      • border-top-style
      • border-right-style
      • border-bottom-style
      • border-left-style
    • labelborder-width
      • border-top-width
      • border-right-width
      • border-bottom-width
      • border-left-width
    • labelborder-color
      • border-top-color
      • border-right-color
      • border-bottom-color
      • border-left-color

Checkout the Border Style
h1 {
  border-style: dotted;
  border-width: 4px;
  border-color: red;
  border-bottom-style: double;
}
border-stylesubject
border-styleclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  border-style: dotted;
  border-width: 4px;
  border-color: red;
  border-bottom-style: double;
}
</style>
</head>
<body>
<h1>Checkout the Border Style</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    border-top-style:
    border-right-style:
    border-bottom-style:
    border-left-style:
/*Different border-style all in one syntax */
  border-style: top right bottom left;


Checkout the Border Width
h1 {
  border-style: dotted;
  border-color: #877cea;
  border-width: 4px;
  border-bottom-width: 6px;
}
border-widthsubject
border-widthclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  border-style: dotted;
  border-color: #877cea;
  border-width: 4px;
  border-bottom-width: 6px;
}
</style>
</head>
<body>
<h1>Checkout the Border Width</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    border-top-width:
    border-right-width:
    border-bottom-width:
    border-left-width:
/*Different border-width all in one syntax */
  border-width: top right bottom left;


Checkout the Border Colors
h1 {
  border-style: dashed;
  border-width: 4px;
  border-color: #af71d5;
  border-bottom-color: purple;
}
border-colorsubject
border-colorclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  border-style: dashed;
  border-width: 4px;
  border-color: #af71d5;
  border-bottom-color: purple;
}
</style>
</head>
<body>
<h1>Checkout the Border Colors</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    border-top-color:
    border-right-color:
    border-bottom-color:
    border-left-color:
/*Different border-color all in one syntax */
  border-color: top right bottom left;


Checkout the Border
h1 {
/*border: width style color */
  border: 4px dashed cadetblue;
}
border (All-In-One)subject
border (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*border: width style color */
  border: 4px dashed cadetblue;
  text-align:center;
}
</style>
</head>
<body>
<h1>Checkout the Border</h1>
</body>
</html>

Only assign top Border
h1 {
/*border-top: width style color */
  border-top: 4px dashed cadetblue;
}
border-topsubject
border-topclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*border-top: width style color */
  border-top: 4px dashed cadetblue;
  text-align:center;
}
</style>
</head>
<body>
<h1>Only assign top Border</h1>
</body>
</html>

Only assign bottom Border
h1 {
/*border-bottom: width style color */
  border-bottom: 4px dashed pink;
}
border-bottomsubject
border-bottomclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*border-bottom: width style color */
  border-bottom: 4px dashed pink;
  text-align:center;
}
</style>
</head>
<body>
<h1>Only assign bottom Border</h1>
</body>
</html>

Only assign left Border
h1 {
/*border-left: width style color */
  border-left: 4px dashed skyblue;
}
border-leftsubject
border-leftclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*border-left: width style color */
  border-left: 4px dashed skyblue;
  text-align:center;
}
</style>
</head>
<body>
<h1>Only assign left Border</h1>
</body>
</html>

Only assign right Border
h1 {
/*border-right: width style color */
  border-right: 4px dashed cadetblue;
}
border-rightsubject
border-rightclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*border-right: width style color */
  border-right: 4px dashed cadetblue;
  text-align:center;
}
</style>
</head>
<body>
<h1>Only assign right Border</h1>
</body>
</html>

  • CSS Outline
❮ Prev CSS Background
Next ❯CSS Outline
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯