Tailwind - Border

•

border

•

기본값

•

테두리 두께

•

테두리 색상

•

테두리 스타일

•

테두리 방향

•

border-radius

border

border 는 테두리 스타일 속성이며, tailwind 에서는 스타일 클래스로 지정되어 있습니다. class 에 border 만 작성해도 기본 테두리를 지정할 수 있습니다.

기본값

그냥 border 클래스만 지정하면, 1px 두께 및 gray 컬러를 기본으로 테두리가 지정됩니다.

테두리 두께

border-두께

두께 기본 단위

•

border: 1px 두께의 기본 테두리

•

border-2: 2px 두께의 테두리

•

border-4: 4px 두께의 테두리

•

border-8: 8px 두께의 테두리

두께 커스텀 지정

border-[크기px]

[ ] 기호를 작성하면, 원하는 크기 단위로 두께를 지정할수 있습니다.

[크기px] 기호의 사용은 border 뿐만아니라 크기를 지정하는 클래스에서 제공되는 단위가 아닌, 직접 지정하는 크기로 크기가 적용되는 모든 클래스에서 통용됩니다.

<div className="m-10 inline-block w-[480px]">  
  <div className="border-[10px] p-4 rounded-lg shadow-md space-y-4 animate-pulse">
    <div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    <div className="space-y-2">
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    </div>
  </div>
</div>
JavaScript
복사

테두리 색상

border-컬러-음영 border-[#000000]

테두리 색상은 border-컬러 형태로 컬러색상 이름을 지정하고, border-컬러-음영 형태로 지정하는 경우에는 음영을 100~900 으로 100 단위로 지정할 수 있습니다.

•

100: 매우 밝은 색상

•

200: 밝은 색상

•

300: 중간 밝기의 색상

•

400: 약간 어두운 색상

•

500: 기본 색상

•

600: 약간 어두운 색상

•

700: 중간 어두운 색상

•

800: 어두운 색상

•

900: 매우 어두운 색상

또, 지정한 색상코드로 테두리를 주고 싶다면, border-[#000000] 형태로 특정한 색상을 지정할 수도 있습니다.

<div className="m-10 inline-block w-[480px]">  
  <div className="border-[10px] border-blue-500 p-4 rounded-lg shadow-md space-y-4 animate-pulse">
    <div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    <div className="space-y-2">
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    </div>
  </div>
</div>
JavaScript
복사

<div className="m-10 inline-block w-[480px]">  
  <div className="border-[10px] border-[#ffc2ff] p-4 rounded-lg shadow-md space-y-4 animate-pulse">
    <div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    <div className="space-y-2">
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    </div>
  </div>
</div>
JavaScript
복사

테두리 스타일

테두리 스타일은 solide~none 까지 브라우저의 지원 스타일에 따라 지정할 수 있습니다.

클래스	설명
border-solid	실선 테두리
border-dashed	대시 스타일 테두리
border-dotted	점선 스타일 테두리
border-double	이중 선 테두리
border-none	테두리 없음

<div className="m-10 inline-block w-[480px]">  
  <div className="border-[10px] border-blue-500 border-dashed p-4 rounded-lg shadow-md space-y-4 animate-pulse">
    <div className="h-60 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    <div className="space-y-2">
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
      <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
    </div>
  </div>
</div>
JavaScript
복사

테두리 방향

클래스	설명
border-t	상단 테두리 적용
border-r	우측 테두리 적용
border-b	하단 테두리 적용
border-l	좌측 테두리 적용
border-x	좌우 테두리 적용
border-y	상하 테두리 적용

border-radius

클래스	설명
rounded-sm	작은 둥근 모서리 (0.125rem / 2px)
rounded	기본 둥근 모서리 (0.25rem / 4px)
rounded-md	중간 둥근 모서리 (0.375rem / 6px)
rounded-lg	큰 둥근 모서리 (0.5rem / 8px)
rounded-xl	더 큰 둥근 모서리 (0.75rem / 12px)
rounded-2xl	매우 큰 둥근 모서리 (1rem / 16px)
rounded-3xl	최대 둥근 모서리 (1.5rem / 24px)
rounded-full	완전 둥글게 (원형)
rounded-t-sm	상단 모서리만 작은 둥글기
rounded-r-sm	우측 모서리만 작은 둥글기
rounded-b-sm	하단 모서리만 작은 둥글기
rounded-l-sm	좌측 모서리만 작은 둥글기
rounded-t-md	상단 모서리만 중간 둥글기
rounded-r-md	우측 모서리만 중간 둥글기
rounded-b-md	하단 모서리만 중간 둥글기
rounded-l-md	좌측 모서리만 중간 둥글기
rounded-t-lg	상단 모서리만 큰 둥글기
rounded-r-lg	우측 모서리만 큰 둥글기
rounded-b-lg	하단 모서리만 큰 둥글기
rounded-l-lg	좌측 모서리만 큰 둥글기
rounded-t-xl	상단 모서리만 더 큰 둥글기
rounded-r-xl	우측 모서리만 더 큰 둥글기
rounded-b-xl	하단 모서리만 더 큰 둥글기
rounded-l-xl	좌측 모서리만 더 큰 둥글기
rounded-t-2xl	상단 모서리만 매우 큰 둥글기
rounded-r-2xl	우측 모서리만 매우 큰 둥글기
rounded-b-2xl	하단 모서리만 매우 큰 둥글기
rounded-l-2xl	좌측 모서리만 매우 큰 둥글기
rounded-t-3xl	상단 모서리만 최대 둥글기
rounded-r-3xl	우측 모서리만 최대 둥글기
rounded-b-3xl	하단 모서리만 최대 둥글기
rounded-l-3xl	좌측 모서리만 최대 둥글기
rounded-full	완전 원형 모서리