CSS 둥근 테두리

border-radius 속성은 요소에 반올림된 테두리를 추가하는 데 사용된다:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
  padding: 5px;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
  padding: 5px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
  padding: 5px;
}
</style>
</head>
<body>

<h2>border-radius 속성</h2>
<p>이 속성은 요소에 반올림된 테두리를 추가하는 데 사용됩니다:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

지금까지 CSS border-radius 둥근 테두리 스타일 활용에 관하여 간략히 살펴보았다.

꼭 실습하기를 추천합니다.

모두 화이팅입니다.!!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 여백 축소(CSS margin collapse) (0)	2023.07.19
CSS 여백(margin) (0)	2023.07.18
CSS 단축 테두리 속성 (0)	2023.07.16
CSS 테두리 측면 속성 설정 (0)	2023.07.15
CSS 테두리 너비(CSS border-width) (0)	2023.07.14