/CSS/Css make border rotate around element

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%);
}

Source: stackoverflow.com

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>

-1

Source: stackoverflow.com

Similar codes

0 vote189 views1 answer
Every user on your website has an image avatar that is displayed when
CSS
2 votes232 views1 answer
How to put a black overlay on a photo css
CSS
48 votes211 views3 answers
Red color rgb
CSS
9 votes200 views3 answers
Css get rid of button outline on click
CSS
1 vote184 views1 answer
Css retirer les puces
CSS
20 votes194 views2 answers
Css disable selection
CSS
-2 votes197 views1 answer
Div color overlay css
CSS
0 vote174 views2 answers
How to center the table horizontally css
CSS
0 vote237 views1 answer
Wordpress how to change logo on a certain page with css
CSS
0 vote192 views1 answer
Nuxt JisonLexerError: Lexical error on line 1: Unrecognized text.
CSS