프로그래밍/CSS
10 둥근 테두리 만들기(border-radius)
윤지(●'◡'●)
2021. 5. 3. 12:59
반응형
둥근 테두리(border-radius)
1) 디테일하게 설정하는 법
선택자{border-radius: top-left-x top-right-x bottom-right-x bottom-left-x/
top-left-y top-right-y bottom-right-y bottom-left-y}
[예시]
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
.radius1 {
border: 3px solid pink;
border-radius: 100px 100px 50px 50px / 30px 30px 100px 100px;
}
</style><body>
<h2>둥근 테두리</h2>
<div class="radius1"></div>
</body>
[결과]
2) 간단하게 설정하는 법
선택자{border-radius: top-x bottom-x / top-y bottom-y}
선택자{border-radius: xy}
[예시]
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
.radius2 {
border: 3px solid blue;
border-radius: 100px/50px;
}
.radius3{
border: 3px solid greenyellow;
border-radius: 150px;
}
</style><body>
<div class="radius2"></div>
<div class="radius3"></div>
</body>
[결과]
[내가 만든 사이트에 적용한 예시]
마켓 상세페이지 네모를 둥글게 만들었다 :)
#brown{
background-color: rgb(82, 63, 22);
width: 130px;
padding: 5px;
text-align: center;
color: white;
font-size: 20px;
text-decoration-line: none;
border-radius: 10px;
}
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형