HTML [CSS] 둥근 div 만들기(border-radius 이용)
페이지 정보
본문
div를 둥글게 만들려면 어떻게 해야할까요?
border-radius 옵션을 사용하면 아주 간단하게 만들 수 있습니다.
<style>
.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
<div class="circle" style="padding-top:30px;border-radius: 50%;">원만들기</div>
IE9에서 제대로 동작하지 않는다면
<head></head>에 다음 태그를 삽입해주면 됩니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
참고자료
http://nine01223.tistory.com/185
https://css-tricks.com/examples/ShapesOfCSS/
border-radius 옵션을 사용하면 아주 간단하게 만들 수 있습니다.
<style>
.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
<div class="circle" style="padding-top:30px;border-radius: 50%;">원만들기</div>
IE9에서 제대로 동작하지 않는다면
<head></head>에 다음 태그를 삽입해주면 됩니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
참고자료
http://nine01223.tistory.com/185
https://css-tricks.com/examples/ShapesOfCSS/
댓글목록
등록된 댓글이 없습니다.