I successfully implemented the borders below using CSS with the following code:
.bottom,
.up,
.left,
.right {
height: 30vh;
position: relative;
background: black;
margin-bottom: 15px;
width: 50vw;
margin-inline: auto;
}
/* Text styling */
.bottom,
.up,
.left,
.right {
color: #fff;
text-align: center;
font-weight: bold;
font-size: 24px;
padding-top: 25px;
padding-bottom: 25px;
}
/* */
.bottom::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(
circle at 10px -5px,
transparent 12px,
#fff 13px
);
}
.bottom::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(
circle at 10px 15px,
#fff 12px,
transparent 13px
);
}
.up::before {
content: "";
position: absolute;
transform: rotate(180deg); /*Very important*/
left: 0;
top: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(
circle at 10px -5px,
transparent 12px,
#fff 13px
);
}
.up::after {
content: "";
position: absolute;
transform: rotate(180deg);
left: 0;
top: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(
circle at 10px 15px,
#fff 12px,
transparent 13px
);
}Here is the corresponding HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="bottom">4</div>
<div class="up">5</div>
<div class="left">6</div>
<div class="right">7</div>
</body>
</html>https://i.sstatic.net/ydJ1M.png
Now I am trying to achieve similar results for the left and right borders. Below is the CSS I have so far:
.left,
.right {
overflow: hidden;
}
.right::before {
content: "";
position: absolute;
transform: rotate(-90deg);
width: 100%;
right: 0;
top: 2px;
bottom: 0;
left: 49%;
background-repeat: repeat;
height: 9px;
background-size: 20px 20px;
background-image: radial-gradient(
circle at 10px -5px,
transparent 12px,
#fff 13px
);
}
.right::after {
content: "";
position: absolute;
transform: rotate(-90deg); /*Very important*/
width: 100%;
right: 0;
top: -1px;
bottom: 0;
left: 48.5%;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(
circle at 10px 15px,
#fff 12px,
transparent 13px
);
}
.left::before {
content: "";
position: absolute;
transform: rotate(90deg); /*Very important*/
width: 100%;
top: 2px;
bottom: 0;
left: -49%;
background-repeat: repeat;
height: 9px;
background-size: 20px 20px;
background-image: radial-gradient(
circle at 10px -5px,
transparent 12px,
#fff 13px
);
}
.left::after {
content: "";
position: absolute;
transform: rotate(90deg);
width: 100%;
top: -1px;
bottom: 0;
left: -48.5%;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image: radial-gradient(
circle at 10px 15px,
#fff 12px,
transparent 13px
);
}This is the current outcome: https://i.sstatic.net/wXXaH.png
Can you help me identify what may be missing from my approach?