HTML/CSS] 테두리(border)는 어떻게 쓰나요?

테두리 관련 속성

텍스트, 그림, 표 등 시각형 모양의 요소에 다양하게 적용할 수 있는 테두리 속성을 알아봅시다. 테두리 속성에는 크게, 테두리두께, 테두리 스타일, 테두리 색상이 있습니다. 

 

테두리 두께

: 테두리 두께는 보통 px을 이용하여 지정하지만 아래와 같이 두께를 조절할 수도 있습니다.

border-width: thin / medium /thick

테두리 스타일

border-style : solide / dashed / dotted / none / hidden/ doubled / groove / inset / outset / ridge

테두리 색상

border-color: 색이름(red) / HEX값(#ff0000) / RGB값(rgb(0,255,0))

 

 

보통은 테두리의 세가지 속성 두께, 스타일, 색상을 하나로 묶에서 지정합니다.

테두리 속성 

border: 두께 / 스타일 / 색상

F12를 눌러 개발자모드로 확인해보니 속성이 잘 적용되었네요~!

 

테두리가 잘 적용되긴 했지만 조금 단조롭죠?

위, 아래, 좌, 우 테두리를 각각 다르게 적용해볼 수도 있는데요~! 

p{
    border-top: 5px solid #00ffff;

    border-right: 4px groove #8878CD;

    border-bottom: 2px dashed green;

    border-left: 3px dotted rgb(231, 100, 65);
}

 

 

추가

박스 모서리 둥글게 만들기

radius를 사용하면 테두리의 가장자리를 둥글게 만들 수 있습니다.모든 모서리를 둥글게 만드려면, border-radius:50px이라고 입력합니다. 만약, 한쪽 가장 자리만 변경하고 싶다면 다음과 같이 써줍니다.

border-top-left-radius: 30px;