728x90
300x250
가로 반지름 크기와 세로 반지름 크기를 함께 지정한다.
border-top-left-radius:<가로크기> <세로크기>
border-top-right-radius:<가로크기><세로크기>
border-bottom-right-radius:<가로크기><세로크기>
border-bottom-left-radius:<가로크기><세로크기>
border-radius:<가로크기> / <세로크기>
border-radius 이용할시에는 사이에 "/" 붙여준다.
둥근박스 예시
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 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>둥근박스</title> <style> div { width:200px; height:100px; display:inline-block; margin:15px; border:2px solid black; background:#8055f3; } .round1 { border-top-left-radius:10px 50px; } .round2 { border-bottom-right-radius:50% 20%; } .round3 { border-top-right-radius:50px;} </style> </head> <body> <div class="round1"></div> <div class="round2"></div> <div class="round3"></div> </body> </html> |
728x90
반응형
'Front-end > HTML' 카테고리의 다른 글
| 햄버거메뉴 코딩으로 만들기 (0) | 2019.02.09 |
|---|---|
| 반응형웹 모바일 해상도 (0) | 2019.02.07 |
| 에밋 키워드 emmet (0) | 2019.01.31 |
| css 말줄임효과 붙이기 (0) | 2019.01.28 |
| 컨텐츠 세로가운데 오도록하는 코딩방법 (0) | 2019.01.25 |
댓글