CSS Border — 테두리 스타일·색상·단축 완전 정리

 

 

Web Development · CSS Border

CSS Border —
테두리 스타일·색상·단축 완전 정리

박스의 외곽선을 만드는 모든 방법

/* 분리 작성 */ .box1 { border-style: solid; border-width: 5px; border-color: red; } /* 단축 — 한 줄로 */ .box2 { border: 3px dotted black; } /* 한쪽만 */ h1 { border-bottom: 3px solid #ccc; }

solid dotted dashed double groove ridge

---

1 Border 3가지 속성

속성	역할	값
border-style	선 종류	solid·dotted·dashed·double·none
border-width	선 굵기	1px·2px·thin·medium·thick
border-color	선 색상	색 이름·#hex·rgb()

※ border-style이 없으면 선이 안 보인다. width와 color만 줘도 style이 기본 none이라 표시 X.

---

2 단축 속성 — border (실무 표준)

border: 3px dotted black; = width + style + color 한 줄. 순서 자유. 실무에서 거의 이것만 쓴다.

---

3 한쪽 방향만

속성	적용 위치
border-top	위쪽만
border-right	오른쪽만
border-bottom	아래만 (제목 밑줄에 자주)
border-left	왼쪽만 (인용 표시에 자주)

※ 활용: 제목 밑줄 → border-bottom: 2px solid #ccc
인용 박스 좌측 막대 → border-left: 4px solid #2d6a4f

반응형

---

4 border-radius — 둥근 모서리

border-radius: 8px; — 모서리 둥글게.
border-radius: 50%; — 정사각형이면 완전한 원이 됨 (프로필 사진).

---

핵심 한 줄 요약

border-style선 종류 — 필수

border 단축width + style + color

border-bottom제목 밑줄에 자주

border-left인용 좌측 막대

border-radius둥근 모서리 / 50% = 원

style 없으면선 안 보임 (기본 none)

Tags

#border #border-style #border-width #border-color #border-bottom #solid #dotted #dashed #border-radius #CSS #HTML #테두리 #박스모델 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

border, border-style, border-width, border-color, border-bottom, solid, dotted, dashed, border-radius, CSS, HTML, 테두리, 박스모델, 웹개발, 티스토리