CSS `border-radius` 선언 생성 방법

네 모서리 값을 왼쪽 위부터 순서대로 입력하고 단위를 정하면 CSS border-radius 선언을 만들 수 있습니다. 입력을 생략한 모서리는 10, 생략한 단위는 px로 처리됩니다.

CSS 둥근 모서리 선언을 준비하는 방법

둥근 모서리를 CSS로 지정할 때는 요소의 네 모서리에 적용할 값을 정하고 border-radius 선언으로 정리해야 합니다. 이 도구는 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래에 해당하는 값을 따로 받아 하나의 선언으로 만들어 줍니다. 카드, 버튼, 입력 영역처럼 모서리마다 다른 반경이 필요한 요소를 다룰 때 입력 위치를 나누어 생각하기 좋습니다.

네 모서리에 같은 값을 넣으면 균일한 둥근 모양을 지정할 수 있고, 위치마다 다른 값을 넣으면 비대칭 모양을 표현할 수 있습니다. 한쪽 모서리만 둥글게 하거나 특정 모서리를 둥글게 하지 않으려는 경우에도 위치별 입력을 활용할 수 있습니다. 결과는 둥근 모서리와 관련된 CSS border-radius 선언이며, 선택자나 다른 속성까지 포함한 스타일 규칙 전체는 아닙니다.

값과 단위를 직접 정하지 않고 일부 입력을 비워 두는 경우도 있습니다. 생략된 각 모서리 값에는 10이 사용되고, 단위를 생략하면 px가 사용됩니다. 따라서 기본값을 그대로 쓸 것인지, 입력하지 않은 칸에도 원하는 값을 넣을 것인지 먼저 결정하면 결과를 해석하기 쉽습니다. 이 도구의 목적은 네 위치의 입력과 단위를 선언 형태로 정리하는 데 있습니다.

네 모서리 값에서 선언을 만드는 순서

1. 둥근 모서리를 지정할 요소를 정한 다음 네 입력란을 확인합니다. 첫 번째 칸에는 왼쪽 위, 두 번째 칸에는 오른쪽 위, 세 번째 칸에는 오른쪽 아래, 네 번째 칸에는 왼쪽 아래 값을 넣습니다. 화면에서 모서리를 바라보는 위치를 기준으로 판단하면 순서를 헷갈리기 덜합니다. 네 모서리를 같은 정도로 만들려면 네 칸에 같은 값을 입력하고, 모서리별 모양을 다르게 만들려면 각 칸에 원하는 값을 따로 입력합니다.

2. 사용할 단위를 정합니다. 단위 설정에 값을 넣거나 선택할 수 있다면 대상 값에 맞는 단위 텍스트를 지정합니다. 도구는 공급된 단위 텍스트를 각 모서리 값 뒤에 붙여 선언을 만듭니다. 따라서 네 값에 한 단위를 함께 적용하려는지, 결과에서 단위 표기가 기대한 형태인지 확인하는 것이 좋습니다. 단위 입력을 생략하면 기본 단위인 px가 사용됩니다.

3. 비워 둔 칸이 있는지 살펴봅니다. 생략된 모서리 값은 10으로 처리되므로, 특정 칸에 다른 값을 적용하려면 그 칸을 비워 두지 말고 의도한 값을 직접 입력해야 합니다. 네 칸을 모두 비웠다면 네 위치에 기본 모서리 값이 적용되는 형태를 예상할 수 있습니다. 일부 칸만 입력한 경우에는 입력한 값과 기본값이 함께 선언에 반영됩니다.

4. 생성 동작을 실행하고 결과 영역의 border-radius 선언을 확인합니다. 결과의 값은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 배치되므로 입력란의 순서와 결과의 순서를 대조합니다. 입력한 단위가 각 값에 붙었는지도 확인합니다. 같은 값을 입력했다면 네 위치가 같은 값으로 나타나는지, 서로 다른 값을 입력했다면 각 위치의 차이가 유지되는지 살펴봅니다.

5. 결과를 실제 스타일 규칙에 사용할 때는 적용할 선택자와 주변 선언을 별도로 준비합니다. 이 도구가 제공하는 결과는 border-radius 선언이므로, 대상 요소를 지정하는 선택자나 다른 시각적 속성까지 자동으로 포함된다고 보지 않습니다. 결과를 옮긴 뒤에는 어느 요소에 적용할지, 입력한 순서가 의도한 모서리와 맞는지 다시 확인합니다. 특히 왼쪽과 오른쪽을 바꾸어 입력하면 생성된 선언도 그 순서를 반영하므로 입력 단계에서 위치를 점검하는 편이 안전합니다.

생성 결과의 순서와 적용 범위

생성 결과를 읽을 때는 값의 개수보다 배치 순서를 먼저 봅니다. 첫 값은 왼쪽 위, 다음 값은 오른쪽 위, 그다음 값은 오른쪽 아래, 마지막 값은 왼쪽 아래에 대응합니다. 이 대응 관계를 알고 있으면 결과에 표시된 선언을 보면서 특정 모서리에 어떤 입력이 연결되었는지 추적할 수 있습니다. 네 입력이 같은 경우에는 같은 반경을 사용하는 형태로 읽고, 값이 다르면 모서리별 차이를 유지한 형태로 읽습니다.

단위는 값과 분리된 별도 설명으로만 남는 것이 아니라 각 값 뒤에 공급된 텍스트가 붙는 방식으로 결과에 반영됩니다. 그러므로 숫자처럼 보이는 입력만 확인하지 말고 결과의 단위 표기도 함께 살펴봐야 합니다. 단위를 생략한 결과를 확인할 때는 px가 사용된다는 기본 동작을 고려합니다. 모서리 값 일부를 생략했다면 해당 위치에 10이 들어간 것으로 해석하고, 직접 입력한 위치와 구분해 읽습니다.

0을 입력한 모서리는 해당 위치에 0을 사용한 결과로 확인할 수 있습니다. 이를 이용하면 한 요소의 세 모서리에는 값을 주고 한 모서리에는 0을 두는 구성처럼 위치별 차이를 결과에서 살펴볼 수 있습니다. 다만 결과가 보여 주는 것은 입력 순서와 단위를 반영한 border-radius 선언입니다. 요소의 실제 화면 모양을 이 도구가 대신 설명하거나, 선택자와 다른 CSS 속성을 함께 작성한 스타일시트를 제공하는 것은 아닙니다.

결과를 적용하기 전에는 세 가지를 확인하면 됩니다. 첫째, 네 값이 의도한 모서리 순서에 놓였는지 봅니다. 둘째, 생략한 칸에 기본값 10이 들어갔는지 생각합니다. 셋째, 단위 텍스트가 각 값 뒤에 반영되었는지 확인합니다. 이 점검은 결과를 읽는 과정이며, 입력한 값이나 단위가 별도의 범위로 제한되거나 자동으로 바뀐다고 전제하지 않습니다. 선언을 다른 스타일 규칙에 옮길 때는 도구 결과와 작성하려는 규칙의 구조를 따로 관리해야 합니다.

사용 예시

카드의 네 모서리를 서로 다른 정도로 둥글게 만들기 위해 네 위치에 값을 입력하고 결과 선언에서 입력 순서와 단위 반영 형태를 확인합니다.

카드의 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 칸에 각각 0, 4, 8, 12를 입력하고 단위로 px를 지정한 뒤 생성 동작을 실행합니다.

생성 결과에는 입력한 네 값이 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 들어가고, 지정한 단위 텍스트가 각 값 뒤에 붙은 CSS border-radius 선언이 포함됩니다.

제한 사항

• 결과는 CSS border-radius 선언이며, 선택자나 다른 속성을 포함한 스타일시트 전체는 아닙니다.

자주 발생하는 오류

• 네 입력란을 시계 방향이나 임의의 순서로 해석하면 값이 다른 모서리에 배치될 수 있습니다. 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서를 기준으로 다시 입력하고, 비워 둔 칸에는 기본값 10이 사용된다는 점도 함께 확인하세요.

자주 묻는 질문

네 모서리에 서로 다른 값을 지정할 수 있나요?

가능합니다. 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래에 해당하는 네 입력란에 값을 각각 넣으면 입력 순서를 반영한 선언이 생성됩니다. 같은 값을 네 칸에 넣으면 균일한 형태로, 서로 다른 값을 넣으면 비대칭 형태로 결과를 읽을 수 있습니다.

입력을 비워 두면 어떤 값이 사용되나요?

입력을 생략한 모서리에는 10이 사용되고, 단위를 생략하면 px가 사용됩니다. 기본값을 원하지 않는 위치가 있다면 그 칸에 원하는 값을 직접 입력해야 합니다.

단위는 결과에 어떻게 반영되나요?

공급한 단위 텍스트가 각 모서리 값 뒤에 붙은 형태로 선언에 반영됩니다. 결과를 사용하기 전에 네 값 뒤의 단위 표기가 의도한 내용인지 확인하세요.