logo

English
                 

Style HTML CSS Border styles

2021.02.17 12:43

운영자 Views:3

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 4825
Notice How to Upload Pictures in webpages 운영자 2016.07.06 2019.12.31 242
Notice How to Write a Webpage 운영자 2016.06.28 2017.07.19 461
Notice Brief Instruction of using SNUMA Website 운영자 2008.04.28 2016.06.28 448
» HTML CSS Border styles 운영자 2021.02.17 2021.02.19 3
53 Where To Find The Windows Wallpaper Location On Your PC 운영자 2021.02.13 2021.02.13 5
52 Johns Hopkins COVID19 Dashboard [2] 이한중*65 2020.05.10 2020.06.01 445
51 A case Report of Acute Myeloid Leukemia [4] file 운영자 2019.12.31 2020.04.14 162
50 LW-SNUMAC Banner file 운영자 2019.05.14 2019.05.14 152
49 Another way of adding a background to a picture [1] file 운영자 2018.04.01 2019.11.12 229
48 Death In the mountain - Story of Marty Schmidt [1] 운영자 2017.05.04 2017.07.11 592
47 How to autostart "iframe" in YouTube Video 운영자 2017.03.02 2018.11.28 638
46 한국을 둘러싼 국제 정치 의 현주소 이건일*68 2017.01.08 2017.01.08 396
45 Rounded boder [3] 운영자 2016.07.03 2016.09.28 258
44 PC Keyboard Shortcuts You Need to Know [1] 운영자 2016.06.29 2016.07.09 489
43 How to use Rich Text Editor 운영자 2016.06.28 2019.12.31 504
42 홈피에 사진 올리기 운영자 2005.06.17 2005.06.17 554
41 Missing Language Bar 운영자 2015.05.17 2015.05.17 340
40 dl, dt [1] 운영자 2015.01.20 2018.09.09 72
39 dt, dl codes 운영자 2013.11.17 2018.09.06 72