프론트엔드/CSS

[CSS] 모서리 모양 변경하기 border-radius

jinwanseo 2021. 4. 3. 11:29
728x90

  CSS 모서리 둥글게 변경하기 border-radius 원 (동그라미) 만들기 

1. HTML에 style 속성 직접 입력을 통한 변경 방식

  기본 형태

//Html 태그 내 style 속성을 이용한 직접 입력 방식
<태그명 style="border-radius:둥글기 원하는 퍼센트%"></태그명>

  샘플 예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS 모서리 변경하기 샘플</title>
</head>
<body>
  <div class="box" style="background:red;margin : 20px;width: 200px;height: 200px;border-radius : 5%;"></div>
  <div class="box2" style="background:blue;margin : 20px;width: 200px;height: 200px;border-radius : 50%;"><div>
</body>
</html>

  출력 결과

 

2. CSS 파일 변경을 통한 모서리 모양 변경

  기본 형태

//CSS 파일 변경을 통한 모서리 모양 변경
CSS Selector {
	border-radius : 둥글기%;
}

  샘플 예제 : HTML, CSS

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS 모서리 변경하기 샘플</title>
  <!--CSS 파일경로-->
  <link href="/CSS파일경로">
</head>
<body>
  <div class="box"></div>
  <div class="box2"><div>
</body>
</html>
.box {
  background:red;
  margin : 20px;
  width: 200px;
  height: 200px;
  border-radius : 5%;
}

.box2 {
  background : blue;
  margin : 20px;
  width: 200px;
  height: 200px;
  border-radius : 50%;
}

 

  출력 결과

728x90