Ruby Coin

Rails 와 프론트 엔드 기술을 이용해 흥미 위주의 빠른 웹 개발 방법론

코스 전체목록

닫기

border

Summary

엘리먼트에 테두리 너비 사이즈, 색상, 스타일을 지정합니다.

[ <'border-width'> || <'border-style'> || <색상> ] | inherit
기본값 각 속성의 기본값을 참조
적용대상 모든요소
상속 상속안됨
퍼센테이지 사용못함
미디어 Visual

 

 

Value

border-width

  • thin : 얇은 테두리
  • medium : 중간 테두리 [default값]
  • thick : 두꺼운 테두리
  • 길이 : 테두리의 두께를 지정하는 명시적인 값으로 음수가 될 수 없다.
  • inherit

border-style [테두리 스타일 보기 - 보더 사이즈를 조절해보세요]

  • solid : 실선
  • dashed : 짧은 선들의 패턴으로 이루어짐
  • dotted : 점선
  • double : 두개의 실선
  • groove : 캔버스에서 안으로 조각되어진것처럼 보인다.
  • ridge : 캔버스에서 튀어 나와 조각되어진것처럼 보인다. groove의 반대로 보임
  • inset : 안쪽으로 입체감이 느껴진다.
  • outset : 밖으로 입체감이 느껴진다. inset의 반대로 보임
  • none : 보더를 지정하지 않는다. [default 값]
  • hidden : 테두리 숨기기

border-color

  • 색상
  • transparent

약식 속성

  • [ border-width | border-style | border-color ]
  • inherit

Tip

  1. border-style: hidden 은 가장 높은 우선순위를 가진다.
  2. border-style : none 은 가장 낮은 우선순위를 가진다.
  3. 얇은 테두리와 넓은 테두리가 겹칠경우 얇은 테두리가 없어진다.
  4. 만약 여러개가 같은 border-width를 가지면 double이 가장 우선순위가 높고, 그 다음으로 solid, dashed, dotted, ridge, outset, groove, inset의 순서대로 적용된다. [sample]
  5. 보더의 약식 속성은 다음과 같이 사용될 수 있다. 아래 p 엘리먼트의 모양은 모두 같다. [sample]
    p {
        border: 1px solid red;
    }
    
    p {
        border-top : 1px solid red;
        border-right : 1px solid red;
        border-bottom : 1px solid red;
        border-left : 1px solid red;
    }
    
    p {
        border-top-width : 1px;
        border-top-style : solid;
        border-top-color: red;
        border-right-width : 1px;
        border-right-style : solid;
        border-right-color: red;
        border-bottom-width : 1px;
        border-bottom-style : solid;
        border-bottom-color: red;
        border-left-width : 1px;
        border-left-style : solid;
        border-left-color: red;
    }

Sample

border-style 우선 순위 예제

border의 약식 속성 예제 - p엘리먼트가 각각 다른 코드를 사용하고 있지만, 모양은 같습니다.

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
  1. 잘풀리는인생
    Css 사전에 boarder 글 오타요
    (오타 글 올려달라 해서 올립니다.)

    outset : 밖으로 입체감이 느껴지낟. inset의 반대로 보임
  2. 푸른하늘
    9일차 공부 감사합니다
  3. 지나가다2
    Value 카테고리 밑에 border-style 밑에 "outset : 밖으로 입체감이 느껴지낟. "
    오타 있네요^^
  4. 지나가다
    [border-style 우선 순위 예제] 에서

    solid-blue --> dashed-blue
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기