CSS Border property display the border on HTML page
11-05-2017    351 times
CSS Border property

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
Tutorial at home

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

Tutorial at home

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>

Tutorial at home
Tutorial at home

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.

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.
    Related Post
  Query About the post