JavaScript로 왼쪽 상단 모서리의 테두리 모양 설정하는 방법

JavaScript에서 요소의 왼쪽 상단 모서리 테두리 모양을 변경하려면 borderTopLeftRadius 속성을 사용하면 됩니다. 이 속성에 원하는 둥근 모서리 반지름 값을 지정하면 해당 모서리가 부드럽게 둥글게 처리됩니다.

기본 사용법

DOM 요소의 style 객체에 접근한 후 borderTopLeftRadius 속성에 픽셀(px) 또는 백분율(%) 단위의 값을 할당하는 방식으로 사용합니다.

document.getElementById("box").style.borderTopLeftRadius = "20px";

예제 코드

아래 예제는 버튼을 클릭하면 박스의 왼쪽 상단 모서리가 둥글게 변하는 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid gray;
            width: 300px;
            height: 200px;
         }
      </style>
   </head>
   <body>
      <div id="box">데모 텍스트</div>
      <br><br>
      <button type="button" onclick="display()">왼쪽 상단 모서리 둥글게 변경</button>
      <script>
         function display() {
            document.getElementById("box").style.borderTopLeftRadius = "20px";
         }
      </script>
   </body>
</html>

코드 설명

#box 스타일: 회색 실선 테두리를 가진 300×200px 크기의 박스를 정의합니다.
버튼 클릭 이벤트: onclick 속성으로 display() 함수를 호출합니다.
display() 함수: id가 "box"인 요소의 borderTopLeftRadius 값을 "20px"로 설정하여 왼쪽 상단 모서리만 둥글게 만듭니다.

참고 사항

값으로 px뿐만 아니라 %, em 등 다양한 CSS 단위를 사용할 수 있으며, 두 개의 값(예: "20px 40px")을 지정하면 타원형 모서리도 만들 수 있습니다. 네 개의 모서리를 한 번에 조절하려면 borderRadius 속성을 사용하는 것이 좋습니다.