10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
Training
Live
JOBS
MORE
CAREER
MEMBERS
CSS Border Property in HTML: Part I
Sonia Bhadouria Vishvkarma
Updated date
May 07, 2020
17.5k
0
2
The CSS border properties allow you to specify the style and color of an element's border.
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Print
Other Artcile
Expand
Introduction
The border shorthand property sets all the border properties in one declaration ie; border-width, border-style, and border-color.
CSS border Property
border:5px solid red;
CSS border-bottom Property
border-style:solid;
border-bottom:thick dotted #ff0000;
CSS border-bottom-color Property
border-style:solid;
border-bottom-color:#ff0000;
CSS border-bottom-style Property
<!DOCTYPE html>
<html>
<head>
<style type=
"text/css"
>
p {
border-style
:
solid
;}
p.
none
{
border-bottom-style
:
none
;}
p.
dotted
{
border-bottom-style
:
dotted
;}
p.
dashed
{
border-bottom-style
:
dashed
;}
p.
solid
{
border-bottom-style
:
solid
;}
p.
double
{
border-bottom-style
:
double
;}
p.
groove
{
border-bottom-style
:
groove
;}
p.
ridge
{
border-bottom-style
:
ridge
;}
p.
inset
{
border-bottom-style
:
inset
;}
p.
outset
{
border-bottom-style
:
outset
;}
</style>
</head>
<body>
<p class=
"none"
>No
bottom
border.</p>
<p class=
"dotted"
>A
dotted
bottom
border.</p>
<p class=
"dashed"
>A
dashed
bottom
border.</p>
<p class=
"solid"
>A
solid
bottom
border.</p>
<p class=
"double"
>A
double
bottom
border.</p>
<p class=
"groove"
>A
groove
bottom
border.</p>
<p class=
"ridge"
>A
ridge
bottom
border.</p>
<p class=
"inset"
>An
inset
bottom
border.</p>
<p class=
"outset"
>An
outset
bottom
border.</p>
</body>
</html>
CSS border-bottom-width Property
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
type
=
"text/css"
>
p
{
border-style:solid;
border-bottom-width:15px;
}
</
style
>
</
head
>
<
body
>
<
p
>
<
b
>
Note:
</
b
>
The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
</
p
>
</
body
>
</
html
>
CSS border-collapse Property
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
type
=
"text/css"
>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</
style
>
</
head
>
<
body
>
<
table
>
<
tr
>
<
th
>
Firstname
</
th
>
<
th
>
Lastname
</
th
>
</
tr
>
<
tr
>
<
td
>
Peter
</
td
>
<
td
>
Griffin
</
td
>
</
tr
>
<
tr
>
<
td
>
Lois
</
td
>
<
td
>
Griffin
</
td
>
</
tr
>
</
table
>
<
p
>
<
b
>
Note:
</
b
>
If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results
in IE8 and earlier versions.
</
p
>
</
body
>
</
html
>
CSS border-color Property
<!DOCTYPE html>
<html>
<head>
<style type=
"text/css"
>
p.one
{
border-style
:
solid
;
border-color
:
#0000ff
;
}
p.two
{
border-style
:
solid
;
border-color
:
#ff0000
#0000ff
;
}
p.three
{
border-style
:
solid
;
border-color
:
#ff0000
#00ff00
#0000ff
;
}
p.four
{
border-style
:
solid
;
border-color
:
#ff0000
#00ff00
#0000ff
#fa00ff
;
}
</style>
</head>
<body>
<p class=
"one"
>One-colored border!</p>
<p class=
"two"
>Two-colored border!</p>
<p class=
"three"
>Three-colored border!</p>
<p class=
"four"
>Four-colored border!</p>
<p><b>Note:</b> The
"border-color"
property does not work if it is used alone. Use the
"border-style"
property to set the borders first.</p>
</body>
</html>
CSS border-left Property
<!DOCTYPE html
>
<
html
>
<
head
>
<
style
type
=
"text/css"
>
p
{
border-style:solid;
border-left:thick double #ff0000;
}
</
style
>
</
head
>
<
body
>
<
p
>
This is some text in a paragraph.
</
p
>
</
body
>
</
html
>
Here, the border-left Property contains some more properties as shown below:
border-left-color-- Property:
border-left-color:orange;
border-left-style Property :
<!DOCTYPEhtml
>
<
html
>
<
head
>
<
styletype
styletype
=
"text/css"
>
p
{
border-style:solid;
}
p.none {border-left-style:none;}
p.dotted {border-left-style:dotted;}
p.dashed {border-left-style:dashed;}
p.solid {border-left-style:solid;}
p.double {border-left-style:double;}
p.groove {border-left-style:groove;}
p.ridge {border-left-style:ridge;}
p.inset {border-left-style:inset;}
p.outset {border-left-style:outset;}
</
style
>
</
head
>
<
body
>
<
p
class
=
"none"
>
No left border.
</
p
>
<
p
class
=
"dotted"
>
A dotted left border.
</
p
>
<
p
class
=
"dashed"
>
A dashed left border.
</
p
>
<
p
class
=
"solid"
>
A solid left border.
</
p
>
<
p
class
=
"double"
>
A double left border.
</
p
>
<
p
class
=
"groove"
>
A groove left border.
</
p
>
<
p
class
=
"ridge"
>
A ridge left border.
</
p
>
<
p
class
=
"inset"
>
An inset left border.
</
p
>
<
p
class
=
"outset"
>
An outset left border.
</
p
>
</
body
>
</
html
>
border-left-width Property:
border-left-width:15px;
Summary
Using this article we are able to give a nice
look & feel
to our Web-Page.
dashed in HTML
groove in HTML
hidden in HTML
inset in HTML
outset in HTML
ridge in HTML
Next Recommended Reading
FEATURED ARTICLES
View All
TRENDING UP
01
Creating Search Feature In Blazor Server Grid
02
Log Correlation In Microservices
03
Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs
04
Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps
05
Fundamentals Of Software Architecture
06
Creating Various Layouts For Different Razor Pages In Blazor
07
Safest Way To Convert String To Int In C#
08
Top Three VS Code Extensions Worth The Money
09
How To Migrate From .NET Core 3.1 To .NET 6.0
10
Web3 Developer Salary Soars In 2022
View All
Crystal Reports Tutorials
Challenge yourself
Are You Cloud Native?
Get Certified
JavaScript Developer