테두리 반경

Coddy HTML 여정의 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;
}

챌린지

쉬움

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

클래스 선택자를 사용하여 "one" 클래스를 가진 모든 요소를 선택하는 CSS 규칙을 작성하세요. 모든 모서리를 동일하게 둥글게 만들도록 테두리를 3px solid #4287f5로, border-radius를 15px로 설정하세요.
클래스 선택자를 사용하여 "two" 클래스를 가진 모든 요소를 선택하는 CSS 규칙을 작성하세요. 테두리와 border-radius를 원하는 임의의 값으로 설정하세요.

직접 해보기

<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>