سمك الحدود وشكلها ولونها باستخدام border

<div class="box">A Box With A Border</div>

.box {
  padding: 20px;
  background-color: #eee;
  border: 3px solid blue;
}

.box {
  padding: 20px;
  background-color: #eee;
  border-width: 3px;
  border-style: solid;
  border-color: blue;
}

/* Continuous Line */
border-style: solid;

/* Dashes */
border-style: dashed;

/* Dots */
border-style: dotted;

/* Two Lines */
border-style: double;

.box {
  padding: 20px;
  border: 2px solid #ccc;
  border-left: 6px solid blue;
}

border: none;

<div class="box box1">A Box With A Solid Border</div>
<div class="box box2">A Box With A Dashed Border</div>
<div class="box box3">A Box With A Dotted Border</div>
<div class="box box4">A Box With A Double Border</div>

.box {
  padding: 20px;
  background-color: #eee;
  border-width: 6px;
  border-color: blue;
  margin-bottom: 20px;
  width: 200px;
}

.box1 {
  border-style: solid;
}
.box2 {
  border-style: dashed;
}
.box3 {
  border-style: dotted;
}
.box4 {
  border-style: double;
}