[css] border-radius

* border-radius

 

요소 테두리 경계의 꼭짓점을 둥글게 만드는 기능

 

- 젠코딩 : bdrs

 

- 방향 순서 (시계방향)

 

 

border-top-left-radius : 상단 왼쪽 모서리를 둥글게 

border-top-right-radius : 상단 오른쪽 모서리를 둥글게 

border-bottom-left-radius : 하단 왼쪽 모서리를 둥글게 

border-bottom-right-radius : 하단 오른쪽 모서리를 둥글게 

 

 

<style>
        p {
            width: 200px;
            height: 100px;
            border: 5px solid #000;
            margin: 20px;
            text-align: center;
            line-height: 100px;
            box-sizing: border-box;

            display: inline-block;

        }
        .box1 {
            border-radius: 20px 30px 40px 50px;
        }
        .box2 {
            border-radius: 50px 50px 0 0;
        }
        .box3 {
            /* 자신의 너비와 높이를 기준 100%로 처리 */
            border-radius: 20% 30% 10% 15%;
        }
        .box4 {
             /* 정원크기 : 가로세로 동일 시 -> 100%,50%, 크기
             border-radius: 100%;
             border-radius: 50%;
             border-radius: 100px;
             border-radius: 50px;
             으로 원 만들 수 있으나, px은 권장 X */

            width: 100px;
            border-radius: 100%;
        }

        .box5 {
            /* border-top-left-radius : 상단 왼쪽 모서리를 둥글게 
            border-top-right-radius : 상단 오른쪽 모서리를 둥글게 
            border-bottom-left-radius : 하단 왼쪽 모서리를 둥글게 
            border-bottom-right-radius : 하단 오른쪽 모서리를 둥글게  */

            border-top-left-radius: 40px 20px;
            border-top-right-radius: 60px 40px;
            border-bottom-right-radius: 40px 30px;
            border-bottom-left-radius: 10px 60px;

        }
        .box6 {
            /* 속기법 앞라인 먼저 작성 후 뒷라인 작성 */
            border-radius: 40px 60px 40px 10px /20px 40px 30px 60px;
        }
       
         
    </style>

결과 이미지

 

참고 링크

 

https://9elements.github.io/fancy-border-radius/#18.100.100.22--378.378