실행 가능한 CSS 문서: CSS 테두리

Q: CSS에서 테두리는 어떻게 넣나요?

두께, 스타일, 색을 담은 단축 속성을 써요. border: 2px solid #2563eb; 가장 중요한 건 스타일이에요. 스타일이 없으면 border 스타일이 none이라 테두리가 그려지지 않아요.

Q: CSS 테두리가 보이지 않는 이유는 무엇인가요?

거의 항상 테두리 스타일을 지정하지 않아서예요. 기본 border-style이 none이라서 border: 2px #2563eb;나 border-color: red;만으로는 아무것도 그려지지 않아요. solid, dashed 같은 스타일을 추가하세요.

Q: CSS로 둥근 모서리는 어떻게 만드나요?

border-radius를 써요. border-radius: 8px;는 네 모서리를 모두 둥글게 해요. 정사각형에 border-radius: 50%;를 주면 원이 되고, 999px 같은 큰 값을 주면 알약 모양이 돼요. 테두리가 없어도 배경까지 둥글게 해요.

Q: 한쪽에만 테두리를 넣으려면 어떻게 하나요?

방향별 속성을 써요. border-bottom: 2px solid #e5e7eb;, 또는 텍스트가 시작하는 쪽에는 border-inline-start를 쓰면 오른쪽에서 왼쪽으로 쓰는 언어에서도 동작해요.

border 단축 속성

border는 요소의 padding과 margin 사이에 선을 그려요. 단축 속성은 두께, 스타일, 색 세 부분을 순서 상관없이 받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

부분	개별 속성	값	기본값
두께	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
스타일	`border-style`	`solid`, `dashed`, `dotted`, `double` 등	`none`
색	`border-color`	모든 색	`currentColor` (글자 색)

빼먹으면 안 되는 건 스타일이에요. 기본값이 none이라서 border: 2px #2563eb;는 아무것도 그리지 않아요. 색을 빼면 테두리는 요소의 글자 색을 가져가요.

테두리 스타일

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double은 선 두 개가 보이려면 최소 3px이 필요해요. groove, ridge, inset, outset은 색에 음영을 줘서 입체적으로 보이게 하고, 브라우저마다 조금씩 달라요. hidden은 none처럼 보여요. 둘은 테두리가 병합된 표 안에서만 달라지고, 이는 HTML 표 테두리 페이지에서 다뤄요.

한쪽씩

모든 방향에 자기 단축 속성(border-top, border-right, border-bottom, border-left)이 있고, 모든 부분에 border-top-color 같은 방향별 개별 속성이 있어요. 논리적 버전인 border-inline-start와 border-block-end는 텍스트 방향을 따라요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width, border-style은 padding과 같은 시계 방향 순서로 값을 한 개에서 네 개까지 받아요. 위, 오른쪽, 아래, 왼쪽이에요.

border-radius로 둥근 모서리

border-radius는 테두리 그리고 배경의 모서리를 둥글게 해요. 그래서 테두리가 전혀 없는 요소에도 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

값	결과
`border-radius: 8px`	모든 모서리를 8px 둥글게
`border-radius: 50%`	정사각형 요소는 원, 직사각형은 타원
`border-radius: 999px`	알약 모양: 짧은 변이 완전한 반원이 돼요
`border-radius: 8px 0`	왼쪽 위와 오른쪽 아래는 8px, 나머지 둘은 각진 모서리
`border-top-left-radius: 12px`	모서리 하나만
`border-radius: 50% / 25%`	타원형 모서리: 가로 반지름 / 세로 반지름

배경이 있는 자식이 둥근 부모의 모서리 밖으로 삐져나올 수 있어요. 부모에 overflow: hidden을 주면 곡선에 맞게 잘라요.

border와 outline 비교

outline은 border처럼 보이지만 그 바깥에 그려지고 공간을 차지하지 않아서, 추가해도 아무것도 움직이지 않아요. 브라우저가 포커스 링에 outline을 쓰는 이유예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
공간 차지	해요, 상자 크기의 일부	안 해요
방향별 지정	돼요 (`border-top`, ...)	안 돼요, 사방 전체
`border-radius` 따르기	따라요	최신 브라우저에서는 따라요
상자에서 띄우기	안 돼요	돼요, `outline-offset`
주로 쓰는 곳	디자인	포커스 표시, 디버깅

자주 하는 실수

테두리 스타일 없음. border: 1px #111827;와 border-color: red;는 아무것도 그리지 않아요. solid(또는 다른 스타일)를 넣으세요.
hover할 때 레이아웃이 튀는 테두리. 투명한 테두리로 공간을 미리 잡아 두거나, outline이나 box-shadow를 쓰세요.
너비에서 테두리 빠뜨리기. 테두리가 있는 width: 100% 요소는 content-box에서 컨테이너를 넘쳐요. box-sizing: border-box를 쓰세요.
자식이 모서리 밖으로 삐져나오는 border-radius. 둥근 부모에 overflow: hidden을 추가하세요.
outline: none으로 포커스 outline 지우기. 키보드 사용자에게 필요해요. 지우지 말고 outline의 스타일을 바꾸세요.

자주 묻는 질문

CSS에서 테두리는 어떻게 넣나요?

두께, 스타일, 색을 담은 단축 속성을 써요. border: 2px solid #2563eb; 가장 중요한 건 스타일이에요. 스타일이 없으면 border 스타일이 none이라 테두리가 그려지지 않아요.

CSS 테두리가 보이지 않는 이유는 무엇인가요?

거의 항상 테두리 스타일을 지정하지 않아서예요. 기본 border-style이 none이라서 border: 2px #2563eb;나 border-color: red;만으로는 아무것도 그려지지 않아요. solid, dashed 같은 스타일을 추가하세요.

CSS로 둥근 모서리는 어떻게 만드나요?

border-radius를 써요. border-radius: 8px;는 네 모서리를 모두 둥글게 해요. 정사각형에 border-radius: 50%;를 주면 원이 되고, 999px 같은 큰 값을 주면 알약 모양이 돼요. 테두리가 없어도 배경까지 둥글게 해요.

한쪽에만 테두리를 넣으려면 어떻게 하나요?

방향별 속성을 써요. border-bottom: 2px solid #e5e7eb;, 또는 텍스트가 시작하는 쪽에는 border-inline-start를 쓰면 오른쪽에서 왼쪽으로 쓰는 언어에서도 동작해요.

border와 outline은 무엇이 다른가요?

border는 상자의 일부라서 공간을 차지하고 요소 크기를 바꿔요. outline은 공간을 차지하지 않고 테두리 바깥에 그려지며, 방향별로 지정할 수 없고, 브라우저가 포커스 링에 쓰는 속성이에요. 최신 브라우저에서는 둘 다 border-radius를 따라요.