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 | 6391 |
Notice | How to Upload Pictures in webpages | 운영자 | 2016.07.06 | 2019.12.31 | 1331 |
Notice | How to Write a Webpage | 운영자 | 2016.06.28 | 2017.07.19 | 1688 |
Notice | Brief Instruction of using SNUMA Website | 운영자 | 2008.04.28 | 2016.06.28 | 1603 |
21 | Error..: fread(): Length parameter must be greater than 0 | 운영자 | 2009.11.14 | 2009.11.14 | 17098 |
20 | Zeroboard Data | 운영자 | 2009.04.29 | 2009.04.29 | 402 |
19 | 외국 동화 - 한글이나 영어로 읽고, 듣고, 보기 | Rover | 2009.01.13 | 2009.01.13 | 300 |
18 | 만년달력 - 음력과 양력 [1] | YonnieC#65 | 2008.10.30 | 2008.10.30 | 450 |
17 | Website Revision | 운영자 | 2008.06.20 | 2008.06.20 | 302 |
16 | Class website data | 운영자 | 2008.05.17 | 2008.05.17 | 422 |
15 | 한국 동화 모음 (펌) | 운영자 | 2008.04.09 | 2008.04.09 | 340 |
14 | ANSI Character Set | 운영자 | 2008.04.09 | 2008.04.09 | 240 |
13 | 세계적인 거장 30인의 작품 모음 | 운영자 | 2008.04.09 | 2008.04.09 | 281 |
12 | 색상 고르기 (Choosing Color codes) [1] | 운영자 | 2008.04.09 | 2008.04.09 | 273 |
11 | Floating Balloons with Messages | 운영자 | 2008.04.09 | 2008.04.09 | 273 |
10 | Webpage (or site) Source Code Viewer | 운영자 | 2008.04.09 | 2008.04.09 | 237 |
9 | Buttons and Icons - Making by Table [1] | Steven | 2008.02.24 | 2008.02.24 | 559 |
8 | 한자사전 (퍼옴) | 석주 | 2007.06.19 | 2007.06.19 | 1833 |
7 | 홈피에 음악 올리기 | 一水去士 | 2006.02.18 | 2006.02.18 | 272 |
6 | 홈피에 사진 올리기 [1] | 一水去士 | 2006.02.18 | 2006.02.18 | 339 |
5 | Marquee Lessons | Lesson | 2005.12.02 | 2005.12.02 | 271 |
4 | HTML Basic Tag Study (4) | Rosun | 2005.07.09 | 2005.07.09 | 319 |
3 | HTML Basic Tag Study (3) | Rosun | 2005.07.09 | 2005.07.09 | 321 |
2 | HTML Basic Tag Study (2) | Rosun | 2005.07.09 | 2005.07.09 | 308 |