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>


이렇게하게 되면, 상단에 왼쪽 부분이 둥글게 적용된 것을 볼 수 있다.



Posted by sungho88
,