CSS 둥근 모서리 border-radius 속성

CSS 둥근 모서리
rouned rect 스타일
둥근 모서리 DIV
모서리가 둥근 보더

1 예시 1[ | ]

html

Copy

<style>
.rounded {
  background: silver;
  height: 50px; width: 200px;
}
</style>
<div class='rounded'>둥근 모서리</div>

html

Copy

<style>
.rounded {
  background: silver;
  height: 50px; width: 200px;
  border-radius: 15px;
}
</style>
<div class='rounded'>둥근 모서리</div>

2 예시 2[ | ]

html

Copy

<style>
.rounded {
  width: 200px;
  background-color: #bdf;
  border: 2px solid #1bf;
  padding: 0.5rem;
  line-height: 1rem;
}
</style>
<div class='rounded'>둥근 모서리 테두리</div>

html

Copy

<style>
.rounded {
  width: 200px;
  background-color: #bdf;
  border: 2px solid #1bf;
  padding: 0.5rem;
  line-height: 1rem;
  border-radius: 0.5rem;
}
</style>
<div class='rounded'>둥근 모서리 테두리</div>

3 같이 보기[ | ]

4 참고[ | ]