CSS 둥근 테두리
CSS 둥근 테두리
border-radius
속성은 요소에 둥근 테두리를 추가하는 데 사용됩니다 .
일반 테두리
둥근 테두리
둥근 테두리
가장 둥근 테두리
예시
p {
border: 2px solid red;
border-radius: 5px;
}
더 많은 예
이 예제에서는 하나의 선언에서 위쪽 테두리에 대한 모든 속성을 설정하기 위한 약식 속성을 보여 줍니다.
이 예제에서는 아래쪽 테두리의 스타일을 설정하는 방법을 보여줍니다.
이 예제에서는 왼쪽 테두리의 너비를 설정하는 방법을 보여줍니다.
이 예제에서는 네 개의 테두리 색상을 설정하는 방법을 보여줍니다. 하나에서 네 가지 색상을 가질 수 있습니다.
이 예제에서는 오른쪽 테두리의 색상을 설정하는 방법을 보여줍니다.
모든 CSS 테두리 속성
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-bottom | Sets all the bottom border properties in one declaration |
border-bottom-color | Sets the color of the bottom border |
border-bottom-style | Sets the style of the bottom border |
border-bottom-width | Sets the width of the bottom border |
border-color | Sets the color of the four borders |
border-left | Sets all the left border properties in one declaration |
border-left-color | Sets the color of the left border |
border-left-style | Sets the style of the left border |
border-left-width | Sets the width of the left border |
border-radius | Sets all the four border-*-radius properties for rounded corners |
border-right | Sets all the right border properties in one declaration |
border-right-color | Sets the color of the right border |
border-right-style | Sets the style of the right border |
border-right-width | Sets the width of the right border |
border-style | Sets the style of the four borders |
border-top | Sets all the top border properties in one declaration |
border-top-color | Sets the color of the top border |
border-top-style | Sets the style of the top border |
border-top-width | Sets the width of the top border |
border-width | Sets the width of the four borders |