Tailwind CSS Academy · 강의

테두리 두께와 색상

border-* 두께 유틸리티로 테두리를 추가하고, border-{color}-{shade}로 색상을 설정하며, 개별 방향을 조절합니다.

레슨 1/413개 단계

테두리 두께와 색상은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Adding Borders With Tailwind

Borders visually separate elements, define form fields, and add structure to card layouts. Tailwind provides the border family of utilities to control width, color, style, and individual sides — all without writing custom CSS. The base border class applies a 1px solid border in the current border color, giving you a clean starting point for any bordered component.

<!-- Simple bordered card -->
<div class="border border-gray-200 rounded-lg p-4 max-w-sm">
  <h3 class="font-semibold">Card Title</h3>
  <p class="text-gray-600 mt-2">Card content with a simple border.</p>
</div>

Border Width Utilities

Tailwind's border width utilities control thickness: border (1px), border-2 (2px), border-4 (4px), and border-8 (8px). The plain border class without a number sets the width to 1px. You can also use border-0 to explicitly remove a border — useful when inheriting a border from a base style that you want to suppress.

<!-- Different border widths -->
<div class="space-y-3">
  <div class="border p-3 rounded">border (1px)</div>
  <div class="border-2 p-3 rounded">border-2 (2px)</div>
  <div class="border-4 p-3 rounded">border-4 (4px)</div>
  <div class="border-8 p-3 rounded">border-8 (8px)</div>
</div>

Individual Side Borders

You can apply borders to individual sides using directional variants: border-t (top), border-r (right), border-b (bottom), and border-l (left). These are commonly used for bottom-bordered navigation links, left accent lines on blockquotes, and top dividers between list items. Combine them freely — border-t border-b adds horizontal borders only.

<!-- Single-side borders for different effects -->
<div class="space-y-4">
  <!-- Bottom border only — navigation tab style -->
  <div class="border-b-2 border-blue-500 pb-2 font-semibold">Active Tab</div>

  <!-- Left border — blockquote accent -->
  <blockquote class="border-l-4 border-indigo-500 pl-4 text-gray-600 italic">
    A meaningful quote with a left accent border.
  </blockquote>

  <!-- Top and bottom borders — horizontal rule effect -->
  <div class="border-t border-b border-gray-200 py-3 text-center">Divider</div>
</div>

Border Color Utilities

Border colors follow Tailwind's color palette with the border-{color}-{shade} pattern, such as border-blue-500 or border-gray-200. If no border color is specified, Tailwind uses the default border color, which is typically a light gray. Setting an explicit color allows your borders to convey semantic meaning — red for errors, green for success, blue for focus, and neutral gray for structure.

<!-- Semantic border colors -->
<div class="space-y-3">
  <div class="border-2 border-blue-500 rounded p-3">Info (blue border)</div>
  <div class="border-2 border-green-500 rounded p-3">Success (green border)</div>
  <div class="border-2 border-yellow-500 rounded p-3">Warning (yellow border)</div>
  <div class="border-2 border-red-500 rounded p-3">Error (red border)</div>
</div>

Default vs Custom Border Color

Tailwind sets a global default border color in its base styles, so plain border already has a color. You can override this default globally in your config's theme.borderColor.DEFAULT. At the component level, simply add any border-* color class to override. The pattern border border-gray-200 is extremely common — a clean 1px light gray border for subtle structure.

<!-- The most common border pattern: 1px gray -->
<div class="grid grid-cols-2 gap-4">
  <div class="border border-gray-200 rounded-lg p-4">
    <span class="font-medium">Default gray border</span>
  </div>
  <div class="border border-gray-300 rounded-lg p-4">
    <span class="font-medium">Slightly darker gray</span>
  </div>
</div>

Border Color With Opacity

Use the slash opacity modifier to make borders semi-transparent: border-blue-500/50 gives you the blue border at 50% opacity. This is useful for subtle layering effects where a solid border would be too harsh but a lighter shade would shift the hue. Semi-transparent borders are common on glassmorphism UI cards, frosted nav bars, and translucent overlay components.

<!-- Glass card with semi-transparent border -->
<div class="bg-white/10 backdrop-blur border border-white/30 rounded-2xl p-6 max-w-sm" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.3);">
  <h3 class="text-white font-bold">Glass Card</h3>
  <p class="text-white/80 mt-2">Semi-transparent border on a frosted glass card.</p>
</div>

Border Style Utilities

Beyond solid borders, Tailwind provides border-dashed, border-dotted, border-double, and border-none to control the visual style of the border line. Dashed borders are often used for upload drop zones and placeholder sections. Dotted borders appear in breadcrumb separators and legacy UI patterns. border-none removes a border entirely, overriding inherited styles.

<!-- Border style examples -->
<div class="space-y-3">
  <div class="border-2 border-solid border-gray-400 p-3 rounded">Solid</div>
  <div class="border-2 border-dashed border-blue-400 p-3 rounded">
    Dashed — great for drag-and-drop zones
  </div>
  <div class="border-2 border-dotted border-purple-400 p-3 rounded">Dotted</div>
  <div class="border-4 border-double border-green-400 p-3 rounded">Double</div>
</div>

X and Y Axis Border Shortcuts

For applying borders to both horizontal sides (top and bottom) or both vertical sides (left and right) simultaneously, use border-x and border-y. border-x sets left and right borders and border-y sets top and bottom. These are more concise than writing two separate directional classes and clearly communicate the intent in your HTML.

<!-- border-x and border-y shortcuts -->
<div class="space-y-4">
  <!-- Left and right borders only -->
  <div class="border-x-2 border-indigo-500 px-4 py-2">
    border-x: left + right borders
  </div>

  <!-- Top and bottom borders only -->
  <div class="border-y border-gray-300 py-3">
    border-y: top + bottom borders
  </div>
</div>

Responsive and State Borders

Border utilities work with responsive prefixes and state variants. A common pattern is border-b-2 border-transparent hover:border-blue-500 for animated underline navigation links — the border is always there (preventing layout shift) but transparent until hovered. This technique creates a smooth, non-jumping underline effect that appears on hover without any JavaScript.

<!-- Animated underline navigation links -->
<nav class="flex gap-6 p-4">
  <a href="#" class="border-b-2 border-transparent hover:border-blue-500 pb-1 text-gray-700 hover:text-blue-600 transition-colors">
    Home
  </a>
  <a href="#" class="border-b-2 border-blue-500 pb-1 text-blue-600 font-medium">
    Active Link
  </a>
  <a href="#" class="border-b-2 border-transparent hover:border-blue-500 pb-1 text-gray-700 hover:text-blue-600 transition-colors">
    About
  </a>
</nav>

Divide Utilities for Children

Instead of adding border-b to every child except the last, use divide-y on the parent. Tailwind's divide-y-* utilities automatically add a top border to every child except the first, creating cleanly separated list items. divide-x-* does the same horizontally. Combine with divide-gray-200 to set the divider color.

<!-- List with automatic dividers using divide utilities -->
<ul class="divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
  <li class="flex items-center gap-3 p-4 hover:bg-gray-50">
    <div class="w-8 h-8 rounded-full bg-blue-400"></div>
    <span>Alice Johnson</span>
  </li>
  <li class="flex items-center gap-3 p-4 hover:bg-gray-50">
    <div class="w-8 h-8 rounded-full bg-green-400"></div>
    <span>Bob Smith</span>
  </li>
  <li class="flex items-center gap-3 p-4 hover:bg-gray-50">
    <div class="w-8 h-8 rounded-full bg-purple-400"></div>
    <span>Carol Davis</span>
  </li>
</ul>

Borders in Form Fields

Form inputs use borders as the primary visual affordance that they are interactive. The standard pattern is border border-gray-300 focus:border-blue-500 with a ring for additional focus visibility: focus:ring-2 focus:ring-blue-500/20. For error states, switch to border-red-500 conditionally. This combination creates accessible, visually clear form fields that meet WCAG focus indicator requirements.

<!-- Form fields with semantic borders -->
<div class="space-y-4 max-w-sm">
  <!-- Default state -->
  <input
    type="text"
    placeholder="Default input"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
  />
  <!-- Error state -->
  <input
    type="text"
    placeholder="Error input"
    class="w-full border border-red-500 rounded-lg px-4 py-2 bg-red-50 focus:outline-none"
  />
  <p class="text-red-600 text-sm">This field is required</p>
</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

인터랙티브 레슨에서 답해보세요

Lesson Recap

In this lesson you learned: border-{width} utilities from border (1px) to border-8 control thickness, directional utilities like border-t, border-b, border-x apply borders to specific sides, and divide-y on the parent creates automatic child dividers. Next up we explore border radius utilities for rounded corners.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“테두리 두께와 색상” 강의는 무료인가요?

네 — “테두리 두께와 색상” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“테두리 두께와 색상”에서 뭘 배우나요?

border-* 두께 유틸리티로 테두리를 추가하고, border-{color}-{shade}로 색상을 설정하며, 개별 방향을 조절합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“테두리 두께와 색상” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기