border-radius는 박스 형태의 테두리 가상을 둥글게 만들 수 있는 속성
티스토리 뷰
1. 개념
border-radius - 모서리 둥글게 만드는 속성
2. 태그
border-radius
html5 코드
|
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
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<style>
div
{
margin-top
:
20px
;
width
:
100px
;
height
:
100px
;
display
:
inline-block
;
border
:
1px solid #000
;
}
</style>
<body>
1
<div style
='
border-top-left-radius
:
20px
'
></div>
2
<div style
='
border-top-left-radius
:
20px 50px
'
></div>
3
<div style
='
border-top-right-radius
:
20px
'
></div>
4
<div style
='
border-bottom-left-radius
:
20px
'
></div>
5
<div style
='
border-radius
:
20px
'
></div>
</body>
</html>
|
결과 화면
코드 설명
1
border-top-left-radius
:
20px
;
border-top-left-radius는 테두리 위에 있는 왼쪽 모서리를 20px로 둥글게 해주는 속성입니다.
2
border-top-left-radius
:
20px 50px
;
border-top-left-radius를 20px 50px로 지정을 하게되면 가로는 20px 크기로 세로는 50px 크기로 모서리를 둥글게 합니다.
3
border-top-right-radius
:
20px
;
border-top-right-radius는 테두리 위에 있는 오른쪽 모서리를 20px 크기로 둥글게 합니다.
4
border-bottom-left-radius
:
20px
;
border-bottom-left-radius는 테두리 아래에 있는 왼쪽 모서리를 20px 크기로 둥글게 합니다.
5
border-radius
:
20px
;
border-radius는 모서리 가장 자리 모두를 20px 크길로 둥글게 합니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] margin - 주변 여백 설정 (0) | 2021.05.03 |
|---|---|
| [css3] border-shadow - 그림자 효과 내기 (0) | 2021.04.30 |
| [css3] border - 테두리 스타일 묶어 지정 (0) | 2021.04.28 |
| [css3] border-color - 테두리 색상 지정 (0) | 2021.04.27 |
| [css3] border-width - 테두리 두께 지정 (0) | 2021.04.26 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday