CSS 둥근 테두리

CSS 둥근 테두리

border-radius 경계선을 요소에 추가하는 속성:

일반 경계선

둥근 경계선

둥근 경계선

둥근 경계선

实例

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

직접 시도해보세요

更多实例

한 번의 선언에서 모든 상단 경계선 속성
이 예제는 한 번의 선언에서 상단 경계선의 모든 속성을 설정하는 줄이기 스타일을 보여줍니다.
하단 경계선 스타일 설정
이 예제는 하단 경계선 스타일을 설정하는 방법을 보여줍니다.
왼쪽 경계선의 너비 설정
이 예제에서는 왼쪽 경계선의 너비를 설정하는 방법을 보여줍니다.
네 가지 경계선의 색상 설정
이 예제에서는 네 가지 경계선의 색상을 설정하는 방법을 보여줍니다. 하나에서 네 가지 색상을 가질 수 있습니다.
오른쪽 경계선의 색상 설정
이 예제에서는 오른쪽 경계선의 색상을 설정하는 방법을 보여줍니다.

모든 CSS 경계선 속성

속성 설명
border 단축 속성, 모든 경계선 속성을 한 문장에서 설정합니다.
border-color 단축 속성, 네 가지 경계선의 색상을 설정합니다.
border-radius 단축 속성, 모든 네 가지 border-*-radius 속성을 설정할 수 있습니다.
border-style 단축 속성, 네 가지 경계선의 스타일을 설정합니다.
border-width 단축 속성, 네 가지 경계선의 너비를 설정합니다.
border-bottom 단축 속성, 모든 하단 경계선 속성을 한 문장에서 설정합니다.
border-bottom-color 하단 경계선의 색상을 설정합니다.
border-bottom-style 하단 경계선의 스타일을 설정합니다.
border-bottom-width 하단 경계선의 너비를 설정합니다.
border-left 단축 속성, 모든 왼쪽 경계선 속성을 한 문장에서 설정합니다.
border-left-color 왼쪽 경계선의 색상을 설정합니다.
border-left-style 왼쪽 경계선의 스타일을 설정합니다.
border-left-width 왼쪽 경계선의 너비를 설정합니다.
border-right 단축 속성, 모든 오른쪽 경계선 속성을 한 문장에서 설정합니다.
border-right-color 오른쪽 경계선의 색상을 설정합니다.
border-right-style 오른쪽 경계선의 스타일을 설정합니다.
border-right-width 오른쪽 경계선의 너비를 설정합니다.
border-top 단축 속성, 모든 상단 경계선 속성을 한 문장에서 설정합니다.
border-top-color 상단 경계선의 색상을 설정합니다.
border-top-style 상단 경계선의 스타일을 설정합니다.
border-top-width 상단 경계선의 너비를 설정합니다.