Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

기초공사 (html,css,javascript)

css_08_ border 본문

STUDY-TEAM/html-css-js _1월

css_08_ border

에스프레소라떼 2024. 1. 14. 12:55

//특정한 꼭짓점만 타원 형태로 만들겠다면 슬래시 없이 가로 반지름과 세로 반지름을 지정한다.

border-위치-radius:가로반지름 세로반지름;

 

모두 다 타원형태로 변경하겠다면

border-raidus:가로반지름 / 세로반지름

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
      width:200px;
      height:100px;
      display:inline-block;
      margin:15px;
      background:#ffd800;
      border:2px solid #222;
    }
    .round1{
      border-radius : 50px/30px;  /* 네 군데 꼭짓점을 똑같은 크기로 라운딩 */
    }
    .round2{
      border-bottom-right-radius : 50% 30%;  /* 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩 */
    }
    .round3{
      border-top-left-radius: 50px 30px;  /* 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩 */
    }
    .round4{
      border-bottom-left-radius: 30px;  /* 값이  하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩  */
    }
	</style>
</head>
<body>
  <div class="round1"></div>
  <div class="round2"></div>
  <div class="round3"></div>
  <div class="round4"></div>
</body>
</html>

 

저작자표시

'STUDY-TEAM > html-css-js _1월' 카테고리의 다른 글

em과 rem  (0) 2024.01.10
datalist와 select  (1) 2024.01.03
input 여러태그들..  (1) 2023.12.31
체크박스와 라디오 버튼 차이  (0) 2023.12.30
'STUDY-TEAM/html-css-js _1월' Related Articles more