CSS Borders
The border property allow to specify the styling of the border of the box which representing the element. Take a look on below example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorials : CSS Border Examples-1</title>
<style>
p{
display:inline-block;
border-bottom:1px solid red;
}
div{
width:400px;
height:120px;
border-top: 5px dotted blue;
border-left: 5px ridge yellow;
border-bottom: 5px groove green;
border-right: 5px dashed red;
}
</style>
</head>
<body>
<h3>The Border Property.</h3>
<p>This is an example of simple CSS border property.</p>
<div>Mixed border example.</div>
</body>
</html>
Above example look something like this
The Border Property.
This is an example of simple CSS border property.
Mixed border example.
There are three properties of a border can be changed:
1. Border-color: This property specifies the color of the border.
2. Border-style: This property defines the looks of border, whether should be solid, dashed, dotted, grooved, hidden etc.
3. Border width: This property defines the width (thickness) of the border.
Let’s start with border-color first.
The border-color Property
The css border-color property allows changing the color of the border surrounding an element. CSS border -color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. If there is any trouble with you then you may go through the previous chapter which describes the CSS colors. CSS Tutorials - CSS Colors
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorials : CSS Border Examples-2</title>
<style>
p{
border-style:solid;
border-width:2px;
}
/*-----This is color name example-----*/
p.para1{
border-color:orange;
}
/*-----This is RGB Color (Absolute Value) example-----*/
p.para2{
border-color:rgb(0,210,155);
}
/*-----This is RGB Color (% Value) example-----*/
p.para3{
border-color:rgb(0%,70%,10%);
}
/*-----This is HEX Color value example-----*/
p.para4{
border-color:#ff6678;
}
/*-----This is SHC (Short HEX Code) example-----*/
p.para5{
border-color:#108;
}
/*-----This is HSL (Hue, Saturation, Light) example-----*/
p.para6{
border-color:hsl(100, 90%, 78%);
}
</style>
</head>
<body>
<h3>The Border Color Property.</h3>
<h2>Example of CSS Border-color property.</h2>
<p class = "para1">Para 1 ... This is color name example.</p>
<p class = "para2">Para 2 ... This is RGB Color (Absolute Value) example.</p>
<p class = "para3">Para 3 ... This is RGB Color (% Value) example</p>
<p class = "para4">Para 4 ... This is HEX Color value example</p>
<p class = "para5">Para 5 ... This is SHC (Short HEX Code) example</p>
<p class = "para6">Para 6 ... This is HSL (Hue, Saturation, Light) example</p>
<span>CSS border -color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. </span>
</body>
</html>
Above example look something like this
The Border Color Property.
Example of CSS Border-color property.
Para 1 ... This is color name example.
Para 2 ... This is RGB Color (Absolute Value) example.
Para 3 ... This is RGB Color (% Value) example
Para 4 ... This is HEX Color value example
Para 5 ... This is SHC (Short HEX Code) example
Para 6 ... This is HSL (Hue, Saturation, Light) example
An HTML element box has four border sides. They are individually named as:
• Border-bottom
• Border-top
• Border-left
• Border-right
Now below example will demonstrate how to color all the sides individually.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-3</title>
<style>
div.test{
width:200px;
height:100px;
border-width:5px;
border-style:dashed;
border-top-color:red;
border-left-color:blue;
border-right-color:green;
border-bottom-color:yellow;
}
</style>
</head>
<body>
<h3>The Border Color Property.</h3>
<p>This is an example of CSS border color property.</p>
<p>Each Side of the Element Box is individually colored.</p>
<div class = "test"></div>
</body>
</html>
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-4</title>
<style>
div.test{
width:200px;
height:100px;
border-width:5px;
border-style:dashed;
/*-----Single Line for coloring each side individually-----*/
border-color:red blue green yellow;
}
</style>
</head>
<body>
<h3>The Border Color Property.</h3>
<p>This is an example of CSS border color property.</p>
<p>Each Side of the Element Box is individually colored in single line.</p>
<div class = "test"></div>
</body>
</html>
The border-style Property
The border of an element box can be styled with various types. Below list is possible types that can define the different style of border.
• Dotted- Defines a doted border, create a series of dots.
• Dashed- Defines a dashed border, creates a series of short lines.
• Solid- Defines a solid border (Most commonly used).
• Double- Defines double line border. Create two solid lines.
• Groove- Create the effect 3D effect. Border looks as curved into the web page.
• Ridge- Create the effect opposite of Groove.
• Inset- Create the effect like box embedded in the page.
• Outset- Create the effect like box coming out of the page.
• None- Define no border.
• Hidden- Defines a hidden border. It means border is not visible but pixel cover the area of webpage.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-5</title>
<style>
div.test{
width:200px;
height:100px;
border-width:5px;
border-color:red blue green yellow;
/*-----Example for Border style property-----*/
border-style:dashed;
}
</style>
</head>
<body>
<h3>The Border Style Property.</h3>
<p>This is an example of CSS border style property.</p>
<div class = "test"></div>
</body>
</html>
All the sides of border individually styled with above all border style.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-6</title>
<style>
div.test{
width:200px;
height:100px;
border-width:5px;
border-color:red blue green yellow;
/*-----Example for Border style property-----*/
border-top-style:solid;
border-left-style:dashed;
border-right-style:dotted;
border-bottom-style:double;
}
</style>
</head>
<body>
<h3>The Border Style Property.</h3>
<p>This is an example of CSS border style property.</p>
<p>Each Side of the Element Box is individually styled.</p>
<div class = "test"></div>
</body>
</html>
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-7</title>
<style>
div.test{
width:200px;
height:100px;
border-width:5px;
border-color:red blue green yellow;
/*-----Example for Border style property-----*/
border-style:solid dashed dotted double;
}
</style>
</head>
<body>
<h3>The Border Style Property.</h3>
<p>This is an example of CSS border style property.</p>
<p>Each Side of the Element Box is individually styled in sinlge line.</p>
<div class = "test"></div>
</body>
</html>
The Border-width Property
The border-width property allows setting width of the borders. The value of this property could be either a length in px, pt, em or cm or it should be set to thin, medium or thick.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-8</title>
<style>
div{
width:400px;
height:100px;
margin:10px;
border-color:red blue green yellow;
border-style:solid dashed dotted double;
}
/*-----Example for Border width property-----*/
div.test1{
border-width:10px;
}
div.test2{
border-width:5pt;
}
div.test3{
border-width:0.3cm;
}
div.test4{
border-width:1em;
}
div.test5{
border-width:medium;
}
</style>
</head>
<body>
<h3>The Border Width Property.</h3>
<p>This is an example of CSS border width property.</p>
<div class = "test1">Example - border-width:10px;</div>
<div class = "test2">Example - border-width:5pt;</div>
<div class = "test3">Example - border-width:0.3cm;</div>
<div class = "test4">Example - border-width:1em;</div>
<div class = "test5">Example - border-width:medium;</div>
</body>
</html>
Like border-color and border-style, border-width can be set individually for each side.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-9</title>
<style>
div{
width:400px;
height:200px;
margin:10px;
border-color:red blue green yellow;
border-style:solid dashed dotted double;
}
/*-----Example for Border width property-----*/
.test{
border-top-width:5px;
border-left-width:thick;
border-right-width:0.3em;
border-bottom-width:5pt;
}
</style>
</head>
<body>
<h3>The Border Width Property.</h3>
<p>This is an example of CSS border width property. Each side width is individually defined.</p>
<div class = "test"></div>
</body>
</html>
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-10</title>
<style>
div{
width:400px;
height:200px;
margin:10px;
border-color:red blue green yellow;
border-style:solid dashed dotted double;
}
/*-----Example for Border width property-----*/
.test{
border-width:5px thick 0.3em 5pt;
}
</style>
</head>
<body>
<h3>The Border Width Property.</h3>
<p>This is an example of CSS border width property. Each side width is individually defined in single line.</p>
<div class = "test"></div>
</body>
</html>
Mixed Example
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-11</title>
<style>
/*-----Example for Border width property-----*/
.test{
width:400px;
height:200px;
margin:10px;
/*-----Each parameter defines individual sides - top, left, bottom and right*/
border-color:red blue green yellow;
border-style:solid dashed dotted double;
border-width:5px thick 0.3em 5pt;
}
</style>
</head>
<body>
<h3>The Border Width Property.</h3>
<p>This is an example of CSS border width property. Each side Color, Style and width is individually defined in single line.</p>
<div class = "test"></div>
</body>
</html>
The Border Properties Shorthand
The border property is the short form of border color, style and width. Check the below example:
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-12</title>
<style>
div{
width:400px;
height:200px;
margin:10px;
}
/*--Border short hand property --*/
.test1{
border: 5px solid red;
}
.test2{
border: 5px solid;
}
.test3{
color:orange;
border: 5px solid;
}
</style>
</head>
<body>
<h3>The Border Properties Shorthand.</h3>
<p>This is an example of border shorthand property.</p>
<div class = "test1"></div>
<p>If color is not defined in border property than border default color will be black or CSS color defines the border color.</p>
<div class = "test2">Default Color is Black.</div>
<div class = "test3">Color is defined from CSS color property.</div>
</body>
</html>
Note: If color is not defined in border property than border default color will be black or CSS color defines the border color.
Above example first value is for width, middle value is for style and last value is for color. Check the below example for shorthand property of individual sides.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-13</title>
<style>
.test{
width:400px;
height:200px;
margin:10px;
/*--Border short hand property individually for each side--*/
border-top: 5px dotted red;
border-left: 5px dashed yellow;
border-right: 5px groove green;
border-bottom: 5px ridge blue;
}
</style>
</head>
<body>
<h3>The Border Properties Shorthand</h3>
<p>This is an example of border shorthand property, individually for each side.</p>
<div class = "test"></div>
</body>
</html>
The Border-radius Property
Border-radius property adds the rounded corners to element box. Check the example:
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-13</title>
<style>
.test{
width:400px;
height:200px;
margin:10px;
border: 2px solid #333;
border-radius:5px;
}
</style>
</head>
<body>
<h3>The Border Radius Property</h3>
<p>This is an example of border radius property.</p>
<div class = "test"></div>
</body>
</html>
However each corner can be individually rounded as shown in below example.
<!DOCTYPE html>
<head>
<title>CSS Tutorials : CSS Border Examples-13</title>
<style>
div{
width:400px;
height:200px;
margin:10px;
}
.test1{
border: 2px solid #333;
border-radius:5px 10px 20px 25px;
}
.test2{
border: 5px solid #FF4973;
border-radius:80px 20px 20px 20px;
}
</style>
</head>
<body>
<h3>The Border Radius Property</h3>
<p>This is an example of border radius property individual for each corner.</p>
<div class = "test1"></div>
<div class = "test2"></div>
</body>
</html>
Related Topics
Post A Comment:
0 comments: