CSS로 DIV 테두리 둥글게 하기 (DIV모서리, DIV테두리)

CSS 를 이용하여 DIV의 테두리를 위와같이 둥글게 만들고 싶을때  어떻게 하는지 설명하겠습니다.

브라우저가 Mozilla 계열이냐 비Mozilla 계열이냐에 따라 다르게 코딩하기 때문에

두가지 경우를 전부 CSS에 설정해 주는것이 좋습니다.

<style type="text/css">

 .topround

 {

-moz-border-radius-topleft: 10px;  // 좌상단 테두리를 둥글게

-moz-border-radius-topright: 10px;   // 우상단 테두리를 둥글게

-webkit-border-top-left-radius : 10px;   // 좌상단 테두리를 둥글게

-webkit-border-top-right-radius : 10px;  // 우상단 테두리를 둥글게

border: 3px solid silver;    // DIV 가장자리에 회색 테두리를 해주면 좀더 이쁘게 보입니다

text-align: center;

vertical-align: middle;

 }

 .bottomround

 {

-moz-border-radius-bottomleft: 10px;  // 우하단 테두리를 둥글게

-moz-border-radius-bottomright: 10px;  // 우하단 테두리를 둥글게

-webkit-border-bottom-left-radius : 10px;  // 우하단 테두리를 둥글게

-webkit-border-bottom-right-radius : 10px;  // 우하단 테두리를 둥글게

border: 3px solid green;  

text-align: center;

vertical-align: middle;

 }

</style>

<div style="font-size:55px;text-align:left;background-color:white;width:98%;margin-top:40px;margin-bottom:40px">

<div class="topround" style="background-color:#294163;padding:15px;">

                    2 18.3.5 미린 111-1111

</div>

<div style="background-color:#CFD6DE;text-align: center;vertical-align: middle;padding:15px;">

                    한미정 (010-111-1111)

</div>

<div class="bottomround" style="background-color:#CEDED6;padding:15px;height:100px">

                      입구방 허니콤 (모세그린) 변경추가 40,000원 주문함 안방창 3D길이 130으로 수정

</div>

</div>

아래와 같이 하면, 상하좌위 모든 테두리가 둥글게 됩니다.

 -moz-border-radius: 10px;  

 -webkit-border-radius: 10px;  

각각 설정하려면 아래와 같이 사용하면 됩니다. 

-moz-border-radius-topleft : 10px; //좌상단 모서리

-moz-border-radius-topright: 10px; //우상단 모서리

-moz-border-radius-bottomleft: 10px; //좌하단 모서리

-moz-border-radius-bottomright: 10px; //우하단 모서리

-webkit-border-top-left-radius: 10px; //좌상단 모서리

-webkit-border-top-right-radius: 10px; //우상단 모서리

-webkit-border-bottom-left-radius: 10px; //좌하단 모서리

-webkit-border-bottom-right-radius: 10px; //우하단 모서리

이상 CSS로 DIV 테두리 둥글게 하기 (DIV모서리, DIV테두리) 였습니다