Corners Border | Learning Axis

HTML

CSS

.template {
  position:relative;
  background-color:#dddddd;
  width:300px;
  margin:35px auto;
  padding:35px;
  text-align: center;
}
.corners-top {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  display:flex;
  justify-content:space-between;
}
.corners-top::before {
  display:block;
  content:'';
  height:20px;
  width:20px;
  background-color:#fff;
  border-radius:0 0 100% 0;
}
.corners-top::after {
  display:block;
  content:'';
  height:20px;
  width:20px;
  background-color:#fff;
  border-radius:0 0 0 100%;
}
.corners-bottom {
  position:absolute;
  bottom:0px;
  left:0px;
  right:0px;
  display:flex;
  justify-content:space-between;
}
.corners-bottom::before {
  display:block;
  content:'';
  height:20px;
  width:20px;
  background-color:#fff;
  border-radius:0 100% 0 0;
}
.corners-bottom::after {
  display:block;
  content:'';
  height:20px;
  width:20px;
  background-color:#fff;
  border-radius:100% 0 0 0;
}
.template2 {
  position:relative;
  border:solid 1px #bd3939;
  width:300px;
  margin:35px auto;
  padding:35px;
  text-align: center;
}
.template2
.corners-top {
  top:-1px;
  left:-1px;
  right:-1px;
}
.template2
.corners-bottom {
  bottom:-1px;
  left:-1px;
  right:-1px;
}
.template2
.corners-top::before {
  border-right:solid 1px #bd3939;
  border-bottom:solid 1px #bd3939;
}
.template2
.corners-top::after {
  border-left:solid 1px #bd3939;
  border-bottom:solid 1px #bd3939;
}
.template2
.corners-bottom::before {
  border-right:solid 1px #bd3939;
  border-top:solid 1px #bd3939;
}
.template2
.corners-bottom::after {
  border-left:solid 1px #bd3939;
  border-top:solid 1px #bd3939;
}