2021.02.17 12:43
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Value | Description | Play it |
---|---|---|
none | Default value. Specifies no border | Play it » |
hidden | The same as "none", except in border conflict resolution for table elements | Play it » |
dotted | Specifies a dotted border | Play it » |
dashed | Specifies a dashed border | Play it » |
solid | Specifies a solid border | Play it » |
double | Specifies a double border | Play it » |
groove | Specifies a 3D grooved border. The effect depends on the border-color value | Play it » |
ridge | Specifies a 3D ridged border. The effect depends on the border-color value | Play it » |
inset | Specifies a 3D inset border. The effect depends on the border-color value | Play it » |
outset | Specifies a 3D outset border. The effect depends on the border-color value | Play it » |
initial | Sets this property to its default value. Read about initial | Play it » |
inherit | Inherits this property from its parent element. Read about inherit |
A dashed border:
div {border-style: dashed;}
A solid border:
div {border-style: solid;}
A double border:
div {border-style: double;}
A groove border:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
A ridge border:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
An inset border:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
An outset border:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Set different borders on each side of an element:
p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
CSS tutorial: CSS Border
HTML DOM reference: borderStyle property
No. | Subject | Author | Date | Last Update | Views |
---|---|---|---|---|---|
Notice | How to write your comments onto a webpage | 운영자 | 2016.07.06 | 2019.12.31 | 5576 |
Notice | How to Upload Pictures in webpages | 운영자 | 2016.07.06 | 2019.12.31 | 547 |
Notice | How to Write a Webpage | 운영자 | 2016.06.28 | 2017.07.19 | 827 |
Notice | Brief Instruction of using SNUMA Website | 운영자 | 2008.04.28 | 2016.06.28 | 771 |
61 | ANSI Character Set | 운영자 | 2008.04.09 | 2008.04.09 | 68 |
60 | Webpage (or site) Source Code Viewer | 운영자 | 2008.04.09 | 2008.04.09 | 84 |
59 | Floating Balloons with Messages | 운영자 | 2008.04.09 | 2008.04.09 | 98 |
58 | 외국 동화 - 한글이나 영어로 읽고, 듣고, 보기 | Rover | 2009.01.13 | 2009.01.13 | 109 |
57 | 세계적인 거장 30인의 작품 모음 | 운영자 | 2008.04.09 | 2008.04.09 | 111 |
56 | HTML Basic Tag Study (3) | Rosun | 2005.07.09 | 2005.07.09 | 114 |
55 | Website Revision | 운영자 | 2008.06.20 | 2008.06.20 | 115 |
54 | Marquee Lessons | Lesson | 2005.12.02 | 2005.12.02 | 117 |
53 | 참고 - Modified Music Player | 운영자 | 2010.02.02 | 2010.02.02 | 120 |
52 | 색상 고르기 (Choosing Color codes) [1] | 운영자 | 2008.04.09 | 2008.04.09 | 121 |
51 | dl, dt [1] | 운영자 | 2015.01.20 | 2018.09.09 | 121 |
50 | HTML Basic Tag Study (2) | Rosun | 2005.07.09 | 2005.07.09 | 132 |
49 | dt, dl codes | 운영자 | 2013.11.17 | 2018.09.06 | 138 |
48 | HTML Basic Tag Study (4) | Rosun | 2005.07.09 | 2005.07.09 | 154 |
47 | 한국 동화 모음 (펌) | 운영자 | 2008.04.09 | 2008.04.09 | 155 |
46 | 홈피에 사진 올리기 [1] | 一水去士 | 2006.02.18 | 2006.02.18 | 164 |
45 | 홈피에 음악 올리기 | 一水去士 | 2006.02.18 | 2006.02.18 | 188 |
44 | Basic Frame Templates - 다른색 테두리, 안테두리와 배경 [1] | 운영자 | 2010.02.27 | 2010.02.27 | 192 |
43 | Zeroboard Data | 운영자 | 2009.04.29 | 2009.04.29 | 195 |
42 | HTML Lesson (1) | Rosun | 2005.07.09 | 2005.07.09 | 196 |