border 정리

border는 테두리입니다.

1. 한 줄에 선언

.p1 {
  border: 2px solid #4d9fff; 
}
// 이 방식을 쓰면 상하좌우 같은 테두리가 생긴다.

.p2 {
  border: 2px dotted #4d9fff; // 실선
}

.p3 {
  border: 2px dashed #4d9fff; // 점선
}

2. 하나하나 명확히 나누기

.p1 {
  border-style: dotted;
  border-color: red;
  border-width: 5px;
}

거의 쓰지않는 방법이다.


3. 테두리 한면한면 설정

.p1 {
  border-top: 3px dotted #4d9fff;
  border-bottom: 2px dashed red;
  border-left: 5px solid green;
}

4면이 다 같은 테두리말고
이렇게 다면 한면한면 테두리가 다르다.



4. 테두리 없는법

방법1. border: none;
방법2. border: 0;

input태그 외에 여러가지 요소들의 테두리를 없앨수있다.