<div class="home-border">
<div class="left-border"></div>
<div class="right-border"></div>
<div class="top-border"></div>
<div class="bottom-border"></div>
</div>
Enter fullscreen mode
Exit fullscreen mode
<style>
/* Borders */
.home-border {
position: relative;
}
.home-border .left-border {
position: absolute;
height: 100vh;
width: 2px;
background-color: var(--main-color);
top: 0;
left: 10px;
}
.home-border .right-border {
position: absolute;
height: 100vh;
width: 2px;
background-color: var(--main-color);
top: 0;
right: 10px;
}
.home-border .top-border {
position: absolute;
height: 2px;
width: 100%;
background-color: var(--main-color);
top: 10px;
left: 0;
}
.home-border .bottom-border {
position: absolute;
height: 2px;
width: 100%;
background-color: var(--main-color);
top: 98.8vh;
left: 0;
}
/* End Borders */
</style>
Enter fullscreen mode
Exit fullscreen mode
Top comments (2)
Maybe explaining what exactly your need, what the different way is, would help others to help you out!
Thank you for your comment Julia,
I meant the crossed borders in background. I want to see creating them with a different way.