css make border rotate around element

Solutions on MaxInterview for css make border rotate around element by the best coders in the world

Search
showing results for - "css make border rotate around element"
Amelie
10 Jan 2020
1.b-border{
2    display: inline-block;
3    position: relative;
4    border: solid #333;
5    border-width: 1px 1px 0px 1px;
6    padding: 20px;
7    margin-bottom: 100px;
8}
9.b-border.border-right{
10  border-width: 1px 0 1px 1px;
11}
12
13.b-border.border-right:after{
14    content: "";
15    position: absolute;
16    right: -30px;
17    border-top: 1px solid #333;
18     border-left: none medium;
19    top: -1px;
20    left: auto;
21    width: 30px;
22    height: 100%;
23    background: linear-gradient(to top left, white calc(50% - 1px), #000 1px, white 50%);
24}
25.b-border:after{
26    content: "";
27    position: absolute;
28    left: -1px;
29    bottom: -15%;
30    border-left: 1px solid #333;
31    height: 15%;
32    width: calc(100% + 1px);
33    background: linear-gradient(to right bottom, white calc(50% - 1px), #000 1px, white 50%);
34}
source
Mira
26 Aug 2018
1<div class="b-border border-right">
2    Hello :)
3</div>
4<p></p>
5<div class="b-border" style="width: 300px;">
6    Lorem ipsum dolor sit amet, consectetur 
7    Lorem ipsum dolor sit amet, consectetur
8    Lorem ipsum dolor sit amet, consectetur
9     Lorem ipsum dolor sit amet, consectetur 
10     Lorem ipsum dolor sit amet, consectetur 
11</div>
source
similar questions
how to add curved border in csscss border radiusadd border to the arraycss inverted border radiuscss border leftborder radius cross browsercorner border csshow to make borders rounded in csscss circle bordercss border radius topoutline radius cssoutline radius csstriangle using css borderborder radius csscss border radiusrotate element csshow to round the corners of a div outline in cssset border only left and right cssbox round corner csscss transform border radiusborder far from element css
queries leading to this page
how to make border tilt in csshow to rotate 25deg border of div element cssborder rotate clokwise csscss rotate around top borderhow to rotate border without rotating border in cssrotating border csshow to do borders rotating in csshow to rotate border in cssborder div animation rotatecan we rotate bordertilt border csstilt div borderrotate border csscan you rotate borders csshow to draw border with some rotation cssrotate border only csscss border rotationcss rotate bordercss border rotateborder rotate cssfix the border when using rotate property in csshow to tilt border csstransform rotate border csscss rotating border animationdiv border rotate border rotate animation csshow to make div border rotate in csscss rotating borderhtml border rotateborder rotateborder transform rotate csscss add padding around backgroundcss make border rotate around elementrotating border css animationborder rotate clokwise css democss rotate border linecss border of a rotatedcss make border rotate around element