English

Data-Info

                 

Style HTML CSS Border styles

2021.02.17 12:43

운영자 Views:486

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 6390
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 1602
18 YouTube Video by Embed Tag [11] 운영자 2011.03.29 2016.07.03 817
17 PC Keyboard Shortcuts You Need to Know [1] 운영자 2016.06.29 2016.07.09 822
16 Rounded boder [3] 운영자 2016.07.03 2016.09.28 972
15 한국을 둘러싼 국제 정치 의 현주소 이건일*68 2017.01.08 2017.01.08 713
14 Death In the mountain - Story of Marty Schmidt [1] 운영자 2017.05.04 2017.07.11 2008
13 dt, dl codes 운영자 2013.11.17 2018.09.06 347
12 dl, dt [1] 운영자 2015.01.20 2018.09.09 323
11 How to autostart "iframe" in YouTube Video 운영자 2017.03.02 2018.11.28 940
10 LW-SNUMAC Banner file 운영자 2019.05.14 2019.05.14 531
9 Another way of adding a background to a picture [1] file 운영자 2018.04.01 2019.11.12 666
8 How to use Rich Text Editor 운영자 2016.06.28 2019.12.31 874
7 A case Report of Acute Myeloid Leukemia [4] file 운영자 2019.12.31 2020.04.14 851
6 Johns Hopkins COVID19 Dashboard [2] 이한중*65 2020.05.10 2020.06.01 1914
5 Where To Find The Windows Wallpaper Location On Your PC 운영자 2021.02.13 2021.02.13 555
» HTML CSS Border styles [1] 운영자 2021.02.17 2021.03.28 486
3 How to embed video to websites 운영자 2021.06.29 2021.06.29 406
2 Using attached mp3 in the webpage 운영자 2021.03.13 2022.04.25 461