Border Radius

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 40번째.

CSS에서 border-radius 속성은 요소의 모서리를 둥글게 만드는 데 사용됩니다. 이 속성을 사용하면 각 모서리의 곡률 반지름을 지정할 수 있어 요소 테두리의 모양을 제어할 수 있습니다. 다음은 border-radius 속성을 사용하는 기본 구문입니다:

selector {
    border-radius: value;
}

value: 둥근 모서리에 적용할 원하는 반경으로, 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다.

하나의 값을 지정하여 네 모서리 모두에 동일한 반경을 적용할 수 있습니다. 다음 예제에서 모든 <div> 요소는 10px의 반경을 가진 둥근 모서리를 갖게 됩니다.

div {
    border-radius: 10px;
}

각 모서리에 대해 서로 다른 값을 개별적으로 설정할 수 있으며, 다음 순서를 사용합니다: 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단.

.button {
    border-radius: 10px 20px 30px 40px;
}

두 개의 값만 지정할 수도 있습니다. 첫 번째 값은 왼쪽 상단과 오른쪽 하단 모서리에 적용되고, 두 번째 값은 오른쪽 상단과 왼쪽 하단 모서리에 적용됩니다.

img {
    border-radius: 20px 50px;
}

챌린지

쉬움

두 개의 <div> 요소가 있고, 각각 "one"과 "two"라는 클래스를 가진 HTML 문서가 주어집니다. 다음 단계를 따르세요:

클래스 선택자를 사용하여 클래스가 "one"인 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. 모든 모서리에 동일한 둥근 모양을 주기 위해 border를 3px solid #4287f5로, border-radius를 15px로 설정하세요.
클래스 선택자를 사용하여 클래스가 "two"인 모든 요소를 대상으로 하는 CSS 규칙을 작성하세요. border를 any value로, border-radius를 원하는 any value로 설정하세요.

치트 시트

border-radius 속성은 요소의 모서리를 둥글게 만듭니다:

selector {
    border-radius: value;
}

값은 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다.

단일 값 - 모든 모서리에 동일한 반경을 적용합니다:

div {
    border-radius: 10px;
}

네 개의 값 - 각 모서리(왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단)에 개별적으로 적용됩니다:

.button {
    border-radius: 10px 20px 30px 40px;
}

두 개의 값 - 첫 번째 값은 왼쪽 상단과 오른쪽 하단에, 두 번째 값은 오른쪽 상단과 왼쪽 하단에 적용됩니다:

img {
    border-radius: 20px 50px;
}

직접 해보기

<html>
<head>
    <title>Border Radius</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="one">This is a division with rounded corners.</div>
    <div class="two">This is another division with rounded corners.</div>
</body>
</html>