×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS Margin Property | set the margin CSS outline Property | set the outline
CSS Border property display the border on HTML page - CSS 3.0
1942    Arnab De    11/05/2017

CSS Border Properties

The style, width and color of border of a HTML component is set by the CSS border properties.

Border property has four sub property

  • border-style
  • border-width
  • border-color
  • border-radius

Border Style

We can change the border style of a section of HTML use the border-style property. border-style property has the following values

  • dotted : dotted border
  • dashed : dashed border
  • solid : solid border
  • double : double border
  • groove : 3D grooved border
  • ridge : 3D ridge border
  • inset : 3D inset border
  • outset : 3D outset border
  • none : no border
  • hidden : hidden border
softetechnologies

CSS Code

div
{
margin:10px;
}
.dotted
{
border-style:dotted;
}
.dashed
{
border-style:dashed;
}
.solid
{
border-style:solid;
}
.double
{
border-style:double;
}
.groove
{
border-style:groove;
}
.ridge
{
border-style:ridge;
}
.inset
{
border-style:inset ;
}
.outset
{
border-style:outset;
}
.none
{
border-style:none;
}

.hidden
{
border-style:hidden;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Border Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dotted">Dotted</div>
<div class="dashed">Dashed</div>
<div class="solid">Solid</div>
<div class="double">Double</div>
<div class="groove">Groove</div>
<div class="ridge">Ridge</div>
<div class="inset">Inset</div>
<div class="outset">Outset</div>
<div class="none">None</div>
<div class="hidden">Hidden</div>
</body>
</html>

CSS BORDERS
CSS BORDERS

Shorthand process of Border style declaration

border-style: dotted solid double dashed;

top->dotted
right->solid
bottom->double
left->dashed

border-style: dotted solid dashed;

top->dotted
right & left->solid
bottom->dashed

border-style: dotted solid;

top & bottom->dotted
right & left->solid

border-style: solid;

top, right, bottom & left->solid

softetechnologies

Border width

By the help of border-width property of CSS we can change the border width of a section of HTML.the value of border-width are specified by the following values

auto : set by browser
length : specified a margin in pt,cm, px etc
% : % of the width of a container
inherit : value inherit from its parent element.

div
{
margin:50px;
}
.first
{
border-style:solid;
border-width:thick;
}
.second
{
border-style:solid;
border-width:2px;
}
.third
{
border-style:solid;
border-top-width:2px;
border-right-width:10px;
border-bottom-width:5px;
border-left-width:20px;
}

<!DOCTYPE html>
<html>
<head>
<title>Border width Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="first">Thick</div>
<div class="second">2x</div>
<div class="third">Multiple</div>
</body>
</html>

Rounded Borders

to show the rounded corner border of a section in HTML then we used the border-radius property of CSS.


div
{
margin:10px;
}

.round1
{
border-style:solid;
border-width:thick;
border-radius:10px;
}
.round2
{
border-style:solid;
border-width:thick;
border-radius:30px;
}
.round3
{
border-style:solid;
border-width:thick;
border-radius:50px;
}


<!DOCTYPE html>
<html>
<head>
<title>Rounded Border Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="round1"><p>Demo Text In DIV</p></div>
<div class="round2"><p>Demo Text In DIV</p></div>
<div class="round3"><p>Demo Text In DIV</p></div>
</body>
</html>

softetechnologies

Border Color

We can change the border color using border-color property of CSS.


div
{
margin:10px;
}

.red
{
border-style:solid;
border-width:thick;
border-color:#F00;
}

.green
{
border-style:solid;
border-width:thick;
border-color:#0F0;
}

.blue
{
border-style:solid;
border-width:thick;
border-color:#00F;
}

<!DOCTYPE html>
<html>
<head>
<title>Border Color Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="red"><p>Demo Text In DIV</p></div>
<div class="green"><p>Demo Text In DIV</p></div>
<div class="blue"><p>Demo Text In DIV</p></div>
</body>
</html>

Shorthand process of Border declaration

we can minimized our border codes for simple issue.

border : width style color;

Note: Declaration of border style is madetory. If we don't declare the border style then other property border-width, border-color or border-radius will not work.

CSS Margin Property | set the margin CSS outline Property | set the outline
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Swami Vivekananda
All that man has to do is to take care of three things; good thought, good word, good deed.
Swami Vivekananda
928
46.7
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     38390
01/01/2018     35122
28/06/2017     32817
25/06/2018     31210
02/08/2017     30877
15/05/2017     25586
01/08/2017     25363
06/07/2017     24875
14/07/2017     20613
21/04/2018     19984
softetechnologies