css animate border
.borderAnimation{
transition: border-width 0.2s linear;
}
.borderAnimation:hover{
border: 2px solid black;
}css animate border
.borderAnimation{
transition: border-width 0.2s linear;
}
.borderAnimation:hover{
border: 2px solid black;
}css make border rotate around element
.b-border{
display: inline-block;
position: relative;
border: solid #333;
border-width: 1px 1px 0px 1px;
padding: 20px;
margin-bottom: 100px;
}
.b-border.border-right{
border-width: 1px 0 1px 1px;
}
.b-border.border-right:after{
content: "";
position: absolute;
right: -30px;
border-top: 1px solid #333;
border-left: none medium;
top: -1px;
left: auto;
width: 30px;
height: 100%;
background: linear-gradient(to top left, white calc(50% - 1px), #000 1px, white 50%);
}
.b-border:after{
content: "";
position: absolute;
left: -1px;
bottom: -15%;
border-left: 1px solid #333;
height: 15%;
width: calc(100% + 1px);
background: linear-gradient(to right bottom, white calc(50% - 1px), #000 1px, white 50%);
}css make border rotate around element
<div class="b-border border-right">
Hello :)
</div>
<p></p>
<div class="b-border" style="width: 300px;">
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
</div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
