Draw ideal symmetric css border with border-radius - html

Question

I'm trying to draw a border with border-radius: 8px;. It perfectly draws symmetrical border without border-radius but messed up with it. What am I doing wrong here?
setTimeout(function(){
document.getElementsByClassName('border')[0].classList.add('animate-border');
},100)
body {
background: white;
}
.main-container {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 300px;
height: 460px;
background: ;
}
.border:before {
border:2px solid black;
border-radius: 8px;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-top: 0;
border-left: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transform: rotateZ(0) rotate(0);
}
.border.animate-border:before {
opacity: 1;
height: 100%;
width: 100%;
transition: opacity 0s ease,width 0.5s ease, height 0.5s 0.5s ease;
overflow: hidden;
transform: rotateZ(0) rotate(0);
}
.border:after {
border: 2px solid black;
border-radius: 8px;
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 0;
border-right: 0;
opacity: 0;
overflow: hidden;
transform: rotateZ(0) rotate(0);
}
.border.animate-border:after {
opacity: 1;
height: 100%;
width: 100%;
overflow: hidden;
transition: opacity 0s 1s ease,width 0.5s 1s ease, height 0.5s 1.5s ease;
transform: rotateZ(0) rotate(0);
}
<div class='main-container border'></div>
CSS:
body {
background: white;
}
.main-container {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 300px;
height: 460px;
background: ;
}
.border:before {
border:2px solid black;
border-radius: 8px;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-top: 0;
border-left: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transform: rotateZ(0) rotate(0);
}
.border.animate-border:before {
opacity: 1;
height: 100%;
width: 100%;
transition: opacity 0s ease,width 0.5s ease, height 0.5s 0.5s ease;
overflow: hidden;
transform: rotateZ(0) rotate(0);
}
.border:after {
border: 2px solid black;
border-radius: 8px;
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 0;
border-right: 0;
opacity: 0;
overflow: hidden;
transform: rotateZ(0) rotate(0);
}
.border.animate-border:after {
opacity: 1;
height: 100%;
width: 100%;
overflow: hidden;
transition: opacity 0s 1s ease,width 0.5s 1s ease, height 0.5s 1.5s ease;
transform: rotateZ(0) rotate(0);
}

Answer 1

First of all, you may apply box-sizing: border-box in all elements (and pseudo-elements) to make the alignment easier. It makes the browser count the border on width and height calculation. That solves your misalignment problem.
Second, since you're resizing the element, the rounded corners get stretched in the middle of the animation. I see no easy way prevent that from happening. But you can disguise it by also animating the right property of the :after pseudo-element, like I did below. That and a faster timing may get you there with your animation.
BTW, it would be more performant if you animated transform: scaleX(...) scaleY(...) instead of width and height, because they're GPU accelerated.
setTimeout(function(){
document.getElementsByClassName('border')[0].classList.add('animate-border');
},100)
body {
background: white;
}
*, *:before, *:after { /* Applies to ALL elements and pseudo-elements */
box-sizing: border-box;
}
.main-container {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 300px;
height: 160px;
background: ;
}
.border:before {
border:2px solid black;
border-radius: 8px;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-top: 0;
border-left: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transform: rotateZ(0) rotate(0);
}
.border.animate-border:before {
opacity: 1;
height: 100%;
width: 100%;
transition: opacity 0s ease,width 0.5s ease, height 0.5s 0.5s ease;
overflow: hidden;
transform: rotateZ(0) rotate(0);
}
.border:after {
border: 2px solid black;
border-radius: 8px;
content: '';
position: absolute;
top: 0;
right: 6px; /* a little offset to hide the squared edge */
width: 0;
height: 0;
border-bottom: 0;
border-right: 0;
opacity: 0;
overflow: hidden;
transform: rotateZ(0) rotate(0);
}
.border.animate-border:after {
opacity: 1;
height: 100%;
width: 100%;
right: 0; /* the wanted right position */
overflow: hidden;
transition: opacity 0s 1s ease,width 0.5s 1s ease, height 0.5s 1.5s ease,right 1s 1s ease; /* Animated 'right' so it slowly gets back to its position */
transform: rotateZ(0) rotate(0);
}
<div class='main-container border'></div>
PS.: I changed the box height to make it fit inside the snippet here.

Answer 2

You just need to specify properties below to pseudo elements because they are position absolute
Add top:0 to .border:before css and add left:0 to .border:after css