웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

border-radius 본문

css3

border-radius

jokack01 2013. 10. 1. 14:15

border-radius : 박스의 모서리를 둥굴게 만든다.

 

  • 곡선으로 표시된 부분은 background-image를 설정한 영역도 영향을 받음.
  • 곡률은 각 모서리별로 지정할 수도 있다


Border-radius: 둥근 모서리 축약 속성

Border-bottom-left-radius: 박스의 왼쪽 하단 모서리의 둥근 정도를 지정하는 속성

Border-bottom-right-radius : 박스의 오른쪽 하단 모서리의 둥근 정도를 지정하는 속성

Border-top-left-radius : 박스의 왼쪽 상단 모서리의 둥근 정도를 지정하는 속성

Border-top-right-radius : 박스의 오른쪽 상단 모서리의 둥근 정도를 지정하는 속성

 

 

ex1)  둥근테두리 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
.div1{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* 파이어폭스 브라우져 */
-webkit-border-radius:25px; /* 웹킷엔진 */
-o-border-radius:25px; /* 오페라브라우져 */
}
.div2{
border:2px solid #a1a1a1;
padding:30px 40px;
margin-top:20px;
background:#dddddd;
width:300px;
border-radius:25px 0 0 10px;
/* 속기형 타입으로 작성 시 (왼쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽 하단) */
-webkit-border-radius:25px 0 0 10px; /* 웹킷엔진 */
-moz-border-radius:25px 0 0 10px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
     
<div class="div1">test1.</div>
<div class="div2">test2.</div>
  
</body>
</html>

 

 

 

ex2) 한쪽 면만을 둥글게 할수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
.div1{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-top-left-radius:10px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:10px;
}
.div2{
border:2px solid #a1a1a1;
padding:10px 40px;
margin-top:20px;
background:#dddddd;
width:300px;
border-radius:10px 0;
/* 속기형 타입으로 {왼쪽상단 오른쪽하단}{오른쪽상단 왼쪽하단}순서로 둥근 테두리 적용 가능 */
-moz-border-radius:10px 0; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
     
<div class="div1">test1.</div>
<div class="div2">test2.</div>
  
</body>
</html>



 

 

 

'css3' 카테고리의 다른 글

word-wrap  (0) 2013.10.08
text-shadow  (0) 2013.10.08
background  (1) 2013.10.02
box-shadow  (0) 2013.10.02
border-image  (0) 2013.10.02
'css3' Related Articles more