6XC

CSS 테두리 생성기

굵기, 스타일(solid, dashed, dotted, double…), 색상, 모서리 반경을 시각적으로 조정하며 실시간 미리보기로 테두리를 디자인하세요.

조회수 670회

border 속성이란

축약형은 border: 굵기 스타일 색상이며, 예를 들어 border: 2px dashed #5b3df5처럼 씁니다. 스타일에는 solid, dashed, dotted, double, groove, ridge, inset, outset 등이 있습니다. 둥근 프레임을 만들려면 border-radius와 함께 사용하고, 탭 밑줄 같은 포인트가 필요하면 한쪽 면만(border-top 등) 스타일을 지정하세요.

자주 묻는 질문

테두리를 넣으면 요소 크기가 왜 바뀌나요?

기본적으로 테두리는 박스 크기에 더해집니다. box-sizing: border-box를 설정하면 너비와 높이에 테두리가 포함됩니다 — 대부분의 리셋 CSS가 채택하는 현대적인 표준입니다.

double 스타일이 보이려면 몇 px가 필요한가요?

double 스타일은 최소 3px가 필요합니다 — 두 개의 선과 그 사이 간격입니다. 그보다 얇으면 하나의 선으로만 보입니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기