table border-radius

둥근 테두리와 선을 가진 테이블을 만드는 방법 (HTML + CSS)

이 글에서는 table border-radius와 관련된 핵심 기법을 실무적으로 설명합니다. CSS의 border-radius 속성과 테이블 셀 선택자를 조합해, 모서리가 부드러운 테이블을 만드는 단계별 방법을 다룹니다. 목적은 단순한 시각 개선이 아니라, 코드가 읽기 쉽고 유지보수 가능한 결과를 얻는 것입니다.

1️⃣ CSS 스타일 정의

우선 <style> 안에 스타일을 선언합니다. 아래 예제는 라운딩 박스를 만들고, 각 셀에 경계를 적용한 뒤 중복된 외곽선을 제거하는 방식입니다.


<style>
.roundingDiv { 
    border: 1px solid #D0D0D0; 
    border-radius: 10px 10px 0 0; 
    overflow: hidden;
    border-collapse: collapse;
}

.borderedTable {
    border-collapse: collapse;
    width: 100%;
}

.borderedTable th, .borderedTable td {
    border: 1px solid #D0D0D0;
    padding: 10px;
    text-align: center;
}

.borderedTable tr:first-child th { border-top: 0; }
.borderedTable tr:last-child td { border-bottom: 0; }
.borderedTable tr th:first-child, 
.borderedTable tr td:first-child { border-left: 0; }
.borderedTable tr th:last-child, 
.borderedTable tr td:last-child { border-right: 0; }
</style>

위 규칙에서 .roundingDiv는 외곽을 둥글게 처리해 시각적으로 완성된 테두리를 제공합니다. .borderedTable는 셀 간의 구분선을 설정하고, 첫 번째·마지막 행과 첫·마지막 셀의 선을 제거해 겹침 현상을 방지합니다. 이러한 조합이 table border-radius 적용에 가장 기본적인 패턴입니다.

2️⃣ HTML 구조 작성

HTML 구조는 단순합니다. 테이블을 <div class="roundingDiv">로 감싸고 그 안에 표를 배치합니다. 이렇게 하면 테이블의 모서리를 둥글게 처리하면서 내부 셀의 선을 유지할 수 있습니다.


<div class="roundingDiv">
  <table class="borderedTable">
    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>직업</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>홍길동</td>
        <td>개발자</td>
      </tr>
      <tr>
        <td>2</td>
        <td>김철수</td>
        <td>디자이너</td>
      </tr>
      <tr>
        <td>3</td>
        <td>이영희</td>
        <td>기획자</td>
      </tr>
    </tbody>
  </table>
</div>

3️⃣ 결과 화면 예시

번호	이름	직업
1	홍길동	개발자
2	김철수	디자이너
3	이영희	기획자

✅ 정리

border-radius로 외곽을 둥글게 만들어 시야를 안정시킬 수 있습니다.
overflow: hidden을 더하면 내부 콘텐츠가 모서리를 뚫고 나오는 문제를 막습니다.
첫 행·마지막 행과 가장자리 셀의 선을 제거해 경계가 두껍게 보이지 않도록 조정합니다.

이 패턴을 활용하면 블로그나 대시보드에 적용하기 쉬운 table border-radius 스타일을 얻을 수 있습니다. 필요하면 색상, 그림자, 간격을 추가해 시각적 완성도를 높이세요. 간단한 변경만으로도 읽기성과 디자인 품질이 크게 개선됩니다.

🚀 이 주제, 우리 서비스에 어떻게 적용할까요?

table border-radius를 실제 서비스와 조직에 녹여보고 싶다면, 현재 아키텍처와 운영 방식을 한 번 점검해 보는 것부터 시작해 보세요. 팀 위키나 기술 블로그, 사내 스터디 주제로도 아주 좋습니다.

이 글이 도움이 됐다면, 비슷한 엔터프라이즈 사례 글들도 함께 살펴보면서 우리 조직에 맞는 운영 상용구를 정의해 보세요.

이 블로그 검색