border-top-left-radius: 10px; // border 상단 왼쪽 모서리 부분을 둥글게 하겠다
border-top-right-radius: 10px; // border 상단 오른쪽 모서리 부분을 둥글게 하겠다.
border-bottom-left-radius: 5px; // border 하단 왼쪽 모서리 부분을 둥글게 하겠다.
border-bottom-right-radius: 5px; // border 하단 오른쪽 모서리 부분을 둥글게 하겠다.
반드시 테이블에만 적용되는 것은 아니다. <div>태그도 CSS로 적용이 가능하다.
.css파일에서 다음과 같이 설정하고,
#example {
border: 2px solid red;
padding: 10px;
border-top-left-radius: 25px;
}
.html 파일에서
<div id="example1">
<h1>큰제목<h1>
</div>
이렇게하게 되면, 상단에 왼쪽 부분이 둥글게 적용된 것을 볼 수 있다.