[css] 박스의 경계선 스타일 지정하기

CSS를 사용하면 HTML 요소 주위에 경계선을 추가하고 스타일을 지정할 수 있습니다. 박스의 경계선 스타일을 지정하기 위해서는 border 속성을 사용합니다.

border 속성

border 속성은 요소의 상, 하, 좌, 우에 경계선을 설정할 때 사용됩니다. 이 속성은 다음과 같은 세 가지 하위 속성으로 구성됩니다.

예제

다음은 border 속성을 사용하여 경계선 스타일을 설정하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    border-width: 2px;
    border-style: dashed;
    border-color: black;
  }
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

이 예제에서는 box 클래스를 가진 <div> 요소에 2픽셀 두께의 점선 스타일의 검정색 경계선이 추가됩니다.

이렇게 CSS의 border 속성을 사용하여 HTML 요소의 경계선 스타일을 지정할 수 있습니다.

참고 자료