logo

English
                 

Style HTML CSS Border styles

2021.02.17 12:43

운영자 Views:86

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