"CSS 둥근 모서리 border-radius 속성"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
17번째 줄: 17번째 줄:


==예시 2==
==예시 2==
<syntaxhighlight lang='html5' highlight='8-10' run>
<syntaxhighlight lang='html5' highlight='8' run>
<style>
<style>
.rounded {
.rounded {
23번째 줄: 23번째 줄:
   background-color: #bdf;
   background-color: #bdf;
   border:2px solid #1bf;
   border:2px solid #1bf;
   padding:0.5em;
   padding:0.5rem;
   line-height: 1em;
   line-height: 1rem;
   border-radius:0.5em;
   border-radius:0.5rem;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
}
}
</style>
</style>

2021년 10월 19일 (화) 15:18 판

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

1 예시 1

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

2 예시 2

<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 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}