Front-end/HTML

타원형태로 둥글게 코딩하기

mooyou 2019. 2. 5. 23:55
728x90
300x250
SMALL

가로 반지름 크기와 세로 반지름 크기를 함께 지정한다.

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
반응형
LIST
저작자표시 비영리 변경금지 (새창열림)