728x90
반응형
- code -
<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
#box2 {
border: 2px solid red;
padding: 10px;
border-radius: 50px 20px;
}
</style>
</head>
<body>
<h2>border-radius: 25px:</h2>
<div id="box1">
<p>모든 모서리가 같은 굴곡을 가지고 있습니다.</p>
</div>
<h2>border-radius: 50px 20px:</h2>
<div id="box2">
<p>왼쪽위와 오른쪽 아래 모서리가 깊게 파인 모양입니다.</p>
</div>
</body>
</html>
결과물
border-radius: 25px:
모든 모서리가 같은 굴곡을 가지고 있습니다.
border-radius: 50px 20px:
왼쪽위와 오른쪽 아래 모서리가 깊게 파인 모양입니다.
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 이미지(image) 회전 (0) | 2020.12.07 |
|---|---|
| [HTML & CSS] a, onclick 태그 (새창/팝업/현재창) 열기 (0) | 2020.12.04 |
| [HTML & CSS] 네비게이션 바(Navigation Bar) 기본 (0) | 2020.11.28 |
| [HTML & CSS] 슬라이드(slide) 옆으로 움직이는 방향 (0) | 2020.11.13 |
| [HTML & CSS] 슬라이드(slide) 위로 올라가는 방향 (0) | 2020.11.09 |
댓글