1. CSS border Style
|
p.dotted {border-style: dotted;}
p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} |
<!DOCTYPE html> <h2>The border-style Property</h2> <p class="dotted">A dotted border.</p> </body> |
2. CSS Border Width
2-1. 길이 단위 : px, pt, cm, em, etc
2-2. this, medium, thick 중 하나를 사용해도 된다. ex) border-width: thick;
2-3. 속성값은 하나에서 4개까지 갖을 수 있다. ex) border -width: 25px, 10px, 4px, 35px;
2-4. width 속성은 style 속성과 함께 사용해야 한다.
3. CSS Border color : border-color
4. CSS Border Sides
ex) p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
5. CSS Border 단축코드ex) : border-width, border-style(required), border-color
p {
border: 5px solid red;
}
6. CSS Rounded Borders :
6-1. 지정형식- border-radius: value;
7. CSS Border 속성들
| 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 |
'코딩' 카테고리의 다른 글
| CSS Text Properties (0) | 2020.03.30 |
|---|---|
| CSS Outline - border 바깥에 그려지는 선 (0) | 2020.03.30 |
| CSS Backgrounds (0) | 2020.03.28 |
| CSS 개요 (0) | 2020.03.28 |
| HTML Layouts (0) | 2018.12.27 |