logo

English
                 

Style HTML CSS Border styles

2021.02.17 12:43

운영자 Views:186

CSS Syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

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  

More Examples

Example

A dashed border:

div {border-style: dashed;}

Try it Yourself »

Example

A solid border:

div {border-style: solid;}

Try it Yourself »

Example

A double border:

div {border-style: double;}

Try it Yourself »

Example

A groove border:

div {
  border-style: groove;
  border-color: coral;
  border-width: 7px;
}

Try it Yourself »

Example

A ridge border:

div {
  border-style: ridge;
  border-color: coral;
  border-width: 7px;
}

Try it Yourself »

Example

An inset border:

div {
  border-style: inset;
  border-color: coral;
  border-width: 7px;
}

Try it Yourself »

Example

An outset border:

div {
  border-style: outset;
  border-color: coral;
  border-width: 7px;
}

Try it Yourself »

Example

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;}

Try it Yourself »


Related Pages

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 5335
Notice How to Upload Pictures in webpages 운영자 2016.07.06 2019.12.31 308
Notice How to Write a Webpage 운영자 2016.06.28 2017.07.19 566
Notice Brief Instruction of using SNUMA Website 운영자 2008.04.28 2016.06.28 538
57 Flat Icons 운영자 2021.06.30 2021.06.30 140
56 How to embed video to websites 운영자 2021.06.29 2021.06.29 115
55 Using attached mp3 in the webpage 운영자 2021.03.13 2022.04.25 174
» HTML CSS Border styles [1] 운영자 2021.02.17 2021.03.28 186
53 Where To Find The Windows Wallpaper Location On Your PC 운영자 2021.02.13 2021.02.13 185
52 Johns Hopkins COVID19 Dashboard [2] 이한중*65 2020.05.10 2020.06.01 1499
51 A case Report of Acute Myeloid Leukemia [4] file 운영자 2019.12.31 2020.04.14 383
50 LW-SNUMAC Banner file 운영자 2019.05.14 2019.05.14 227
49 Another way of adding a background to a picture [1] file 운영자 2018.04.01 2019.11.12 362
48 Death In the mountain - Story of Marty Schmidt [1] 운영자 2017.05.04 2017.07.11 1687
47 How to autostart "iframe" in YouTube Video 운영자 2017.03.02 2018.11.28 706
46 한국을 둘러싼 국제 정치 의 현주소 이건일*68 2017.01.08 2017.01.08 442
45 Rounded boder [3] 운영자 2016.07.03 2016.09.28 728
44 PC Keyboard Shortcuts You Need to Know [1] 운영자 2016.06.29 2016.07.09 560
43 How to use Rich Text Editor 운영자 2016.06.28 2019.12.31 588
42 홈피에 사진 올리기 운영자 2005.06.17 2005.06.17 621