border-color

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

border-color 는 테두리의 색을 지정합니다.
border 에서 컬러설정만 특화된 것입니다.

예제 1
border-color 개요
보기
border-color : black
border-color : red
border-color : #FF0080
border-color : rgb(128, 0, 255)
border-color : rgba(128, 0, 255, 0.5)
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid silver;
        font-size : 12pt !important;
        line-height : 80px !important;
        margin-bottom : 10px;
        text-align : center;
    }
</style>

<div class="css_test" style="border-color:black;">border-color : black</div>
<div class="css_test" style="border-color:red;">border-color : red</div>
<div class="css_test" style="border-color:#FF0080;">border-color : #FF0080</div>
<div class="css_test" style="border-color:rgb(128, 0, 255);">border-color : rgb(128, 0, 255)</div>
<div class="css_test" style="border-color:rgba(128, 0, 255, 0.5);">border-color : rgba(128, 0, 255, 0.5)</div>
설명
- border-color : rgba(128, 0, 255, 0.5) 처럼 알파값(반투명)도 적용이 됩니다.
- 참고 : CSS 에서의 컬러값
예제 2
실습 - border-color 1개 속성 조절해 보기
보기
CSS 공작소
border-color :
border-color : red red
예제 3
실습 - border-color 2개 속성 조절해 보기
보기
CSS 공작소
border-color :
border-color : red red
설명
- 각각 다른 색을 지정할 수 있습니다.
- 위 아래, 오른쪽 왼쪽 값을 동시에 조절합니다.
예제 4
실습 - border-color 3개 속성 조절해 보기
보기
CSS 공작소
border-color :
border-color : red red red
설명
- 위 , 오른쪽 왼쪽, 아래 세개의 값을 동시에 조절합니다.
예제 5
실습 - border-color 4개 속성 조절해 보기
보기
CSS 공작소
border-color :
border-color : red red red red
설명
- 각각의 테두리를 개별적으로 조절합니다.
- 순서는 위쪽부터 시계방향으로 위, 오른쪽, 아래, 왼쪽의 순서입니다.
연구 1
실습 - border-color 알파값 조절해 보기
보기
CSS 공작소
border-color :
255
255
255
0.7
border-color : rgba(255, 255, 255, 0.7)
CSS 공작소
설명
- 슬라이더를 움직여서 테두리의 변화를 직접 확인해 보세요 ^^
+ 관련 CSS +