border-radiusを%で指定した場合はどうなるのでしょうか？

border-radiusでパーセント指定の意味が良く分からない為、ご教授下さい。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>CSS Animations</title>
6    <style>
7        .box{
8            width:40px;
9            height:40px;
10            background:skyblue;
11            cursor:pointer; 
12            opacity:1;
13            transition:all 2s;
14            transition-timing-function:ease;
15
16        }
17        .box.moved{
18            animation-name:spin;
19            animation-duration:2s;
20            animation-iteration-count:infinite;
21        }
22
23        @keyframes spin {
24            0% {transform: none;}
25            50% {transform:ratate(150deg) scale(0.8); border-radius:80%;}
26            /* 80% {transform:ratate(320deg) scale(1.8); border-radius:50%;} */
27            100%{transform:rotate(360deg);}
28        }
29    </style>
30
31</head>
32<body>
33    <div class="box "></div>
34
35    <script>
36        (() => {
37            'use strict';
38            document.querySelector('body').addEventListener('click',() => {
39                document.querySelectorAll('.box').forEach((box) =>{
40                    box.classList.add('moved');
41                });
42            });
43        })();
44    </script>
45
46</body>
47</html>

上記のコードにおきまして、

 @keyframes spin {
            0% {transform: none;}
            50% {transform:ratate(150deg) scale(0.8); border-radius:50%;}
            100%{transform:rotate(360deg);}
        }

ここの部分で、50%の指定の際に、border-radiusを50%と指定しているのですが、何故、四角形だったボックスが真ん丸になるのかが分からないです。
50%とは何に対しての割合なのでしょうか？