CSS Border Corner Shape: Scoop, Notch, Square-Cut

Demo:

*to see the CSS Border Shape: Scoop, Notch, Square-Cut tutorial output on the website click here.

To learn how to create: Scoop, Notch and Square-Cut corners in CSS follow the steps below:

SCOOPED CORNERS

<!doctype html>
<html>
<head>
<style>
.scoop {
  position: relative;
  font-size: 25px;
  font-family: arial black;
  z-index:1;
  left:100px;
  top:100px;
}

.scoop:before {
  z-index:-1;
  content:"";
  position: absolute;
  background: radial-gradient(circle at 0 0, transparent 15%, lightblue calc(15%)) top left, radial-gradient(circle at 100% 0, transparent 15%, lightblue calc(15%)) top right, radial-gradient(circle at 0 100%, transparent 15%, lightblue calc(15%)) bottom left, radial-gradient(circle at 100% 100%, transparent 15%, lightblue calc(15%)) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  width: 300px;
  height: 130px;
  left:-40px;
  top:-45px;
}
</style>
</head>
<body>
	<div class="scoop">Scooped Border</div>
</body>
</html>

Output:

NOTCHED CORNERS

<!doctype html>
<html>
<head>
<style>
.notch {
  position: relative;
  width: 300px;
  height: 70px;
  background-color: lightblue;
  top:100px;
  left:100px;
  text-align: center;
  line-height:2.5;
  font-size: 25px;
  font-family: arial black;
}

.notch:before, .notch:after {
  position: absolute;
  content:"";
  border-right: 20px solid transparent;
  border-left:20px solid transparent;
  width: 260px;
  height:0;
  left:0;
}

.notch:before {
  border-top:30px solid lightblue;
  top:70px;
}

.notch:after {
  border-bottom:30px solid lightblue;
  top:-30px;
}
</style>
</head>
<body>
	<div class="notch">Notched Border</div>
</body>
</html>

Output:

SQUARE-CUT CORNERS

<!doctype html>
<html>
<head>
<style>
.squareCut {
  position: relative;
  z-index:1;
  top:100px;
  left:100px;
  font-size: 25px;
  font-family: arial black;

}

.squareCut:before, .squareCut:after {
  content:"";
  position: absolute;
  background-color: lightblue;
  z-index:-1;
}

.squareCut:before {
  width:300px;
  height: 90px;
  top:-25px;
  left:-22px;
}

.squareCut:after {
  height: 130px;
  width: 260px;
  left:-2px;
  top:-45px;
}

</style>
</head>
<body>
	<div class="squareCut">Square-Cut Border</div>
</body>
</html>

Output:

Enjoy coding!

Share this: