<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border-radius: 30px;
background: #8b2153;
padding: 20px;
width: 300px;
height: 100px;
color: #fff;
text-align: center;
}
.border2 {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background: #4db697;
padding: 20px;
width: 300px;
height: 100px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<h1>The border-radius</h1>
<p class="border1">border-radius</p>
<p class="border2">border-radius</p>
</body>
</html>
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
위 4개의 축약형은 border-radius 이다
border-radius는 1~4개의 속성을 가진다
border-radius: 50px 10px 10px 0px;
border-radius : 좌측 상단, 우측 상단, 우측 하단, 좌측 하단;
border-radius: 10px 50px 10px;
border-radius : 좌측 상단, 우측 상단과 좌측 하단, 우측 상단;
border-radius : 좌측 상단과 우측 하단, 좌측 하단과 우측 상단;
border-radius: 20px;
border-radius : 모든 방향;'Web > HTML | CSS|JAVASCRIPT' 카테고리의 다른 글
| opacity 정리(CSS) (0) | 2020.07.27 |
|---|---|
| Shadow 정리(CSS) (0) | 2020.07.27 |
| 간단한 hover 기능 구현(HTML, CSS) (0) | 2020.07.27 |
| 자바스크립트를 사용하지 않은 슬라이드 이미지 만들기(HTML, CSS) (0) | 2020.07.21 |
| transfrom, keyframes 도형 회전하기(HTML, CSS) (0) | 2020.07.18 |
