프로그래밍/CSS 3.0

border-radius 테두리를 둥글게 하는 스타일

쇠주는참이슬 2012. 3. 20. 10:43
css 3.0에서 가능한 스타일이다.
ie7나 ie8에서 사용하려면  http://dotweb.tistory.com/3  여기를 확인

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    
    
    <style>
ul.navi li{
list-style-type:none;
display::block;
width:8em;
height:1.5em;
float:left;
text-align:center;
border-right:1px solid;
background-color: #C63;
}
 
ul.navi li:first-child
{
-webkit-border-top-left-radius:.5em;
-border-top-left-radius:.5em;
-webkit-border-bottom-left-radius:.5em;
-border-bottom-left-radius:.5em;
}
ul.navi li:last-child
{
-webkit-border-top-right-radius:.5em;
-border-top-right-radius:.5em;
-webkit-border-bottom-right-radius:.5em;
-border-bottom-right-radius:.5em;
}
</style>
    
</head>
<body>
<section>
<h1>모바일 OS</h1>
<ul class="navi">
  <li>iOS</li>
  <li>안드로이드</li>
  <li>윈도우(망고)</li>
  <li>바다</li>
</ul>
<br/>
<ul>
  <li>iOS</li>
  <li>안드로이드</li>
  <li>윈도우(망고)</li>
  <li>바다</li>
</ul>
</section>
</body>
</html>