css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기

네 안녕하세요, 이번 포스팅에서는 각각의 테두리에 둥근 모서리를 적용시키는 방법에 대하여 알아보겠습니다.

이전 포스팅에서 쓴 모든 모서리를 둥글게 만드는 방벙에 이어서 작성하는 포스팅입니다.

모든 모서리를 둥글게 만드는 방법이 궁금하신 분들은 아래 포스트를 기재해 둘 테니,

그곳을 방문해 주시면 감사하겠습니다.

2023.03.19 - [html, css, 자바스크립트] - css border-radius 속성으로 모든 모서리 둥글게 만들기

css border-radius 속성으로 모든 모서리 둥글게 만들기

css border-radius 속성으로 모든 모서리 둥글게 만들기 네 안녕하세요, 이번 포스팅에서는 css에서 쓰는 고급 테두리 꾸미기 기능 중에서 테두리를 둥글게 만드는 방법에 대하여 알아보도록 하겠습

funnycoderl.tistory.com

1. 각각의 테두리에 둥근 모서리 적용시키기

각각의 테두리를 개별적으로 적용시키는 방법은 다소 까다로울 수 있습니다.

우선 테두리가 적용이 되는 순서를 알아야 합니다.

테두리 적용의 우선순위는 이러합니다.

좌상단(border-top-left)
우상단(border-top-right)
우하단(border-bottom-right)
좌하단(border-bottom-left)

이 순서대로 진행이 됩니다.

그리고 하단의 테두리는 각각 다르게 적용을 하면 그에 대한 값이 적용이 되지만,

그 값을 적용하지 않았을 경우에는 상단에 지정한 값의 영향을 받습니다.

그리고 그 영향을 받는 관계는 선대칭 관계가 아닌 점대칭 관계로 지정되기로 약속이 되어있습니다.

예를 들어 이렇습니다.

좌상단만 값을 주었을 경우 : 좌상단, 우하단만 값 적용
우상단만 값을 주었을 경우, 우상단, 좌하단만 값 적용

이러한 관계가 형성이 되어있습니다.

그리고 적용 값이 3개일 경우는 css가 적용되는 우선순위에 따라서

좌상던, 우상단, 우하단 순으로 지정이 됩니다.

만약에 이 값이 적용되는 가장 마지막 부위를 좌하단으로 적용하고 싶으시다면,

제일 먼저 값이 지정되는 좌상단 값에 '0px'를 집어넣으시면 됩니다.

그러면 원하는 대로 값이 지정이 됩니다.

그럼 이에 대한 간단한 예제를 한 번 보여드리도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>둥근 모서리 테두리</title>
    <style>
    p {
        background : #90D000;
        padding : 20px;
        width : 300px;
    }
    #round1 { border-radius : 50px; }
    #round2 { border-radius : 0px 20px 40px 60px; }
    #round3 { border-radius : 0px 20px 40px; }
    #round4 { border-radius : 0px 20px; }
    #round5 { border-radius : 50px;
                border-style : dotted; }
    </style>
</head>
<body>
    <h3>둥근 모서리 테두리</h3>
    <hr>
    <p id="round1">반지름 50픽셀의 둥근 모서리</p>
    <p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
    <p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
    <p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
    <p id="round5">반지름 50의 둥근 점선 모서리</p>
</body>
</html>

이렇게 각각의 태그에 서로 다른 모서리 스타일을 지정을 해봤습니다.

각각에 대하여 설명을 드리자면,

첫 번째는 사면 모두 둥근 박스이고,

두 번째는 각각의 부분에 다 다른 값을 적용한 박스이고,

세 번째는 좌하단 값을 적지 않아서 우상단 값이 상속되어 같은 값을 띄고 있는 것을 보여주는 박스이고,

네 번째는 좌상단의 값은 0px, 우상단의 값은 20px이므로

각각 우하단, 좌하단이 0px, 20px의 값을 상속받아 적용이 된 박스이고,

다섯 번째는 둥글게 굴린 모서리에도 다양한 테두리 효과를 입힐 수 있음을 보여주려고 만든 것입니다.

그럼 결과 화면도 같이 보시죠.

이렇게 결과가 잘 적용이 된 것을 보실 수가 있습니다.

요런 식으로 모서리를 다양한 모습으로 둥글려서 만드실 수도 있습니다.

여기까지 css로 둥근 모서리를 만드는 방법을 알아보았습니다.

다음 포스팅에서는 css를 이용하여 이미지 테두리를 만드는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 배경 제어 프로퍼티로 배경 제어하기 (0)	2023.04.02
css border-image 프로퍼티로 이미지 테두리 만들기 (0)	2023.04.02
css border-radius 속성으로 모든 모서리 둥글게 만들기 (0)	2023.03.19
css border 속성으로 테두리 한 번에 꾸미기 (0)	2023.03.19
css border 속성 이용하여 테두리 꾸미기 (0)	2023.03.18

개발러 L의 뻔fun한 코딩

css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기