1)border-width
2)border-color
3)border-style
4)border
Each one is discussed below.
1)border-width:
The border-width defines the width of the border. The value of broder width can be defined as,
- thin
- medium
- thick
- a numeric value, indicated in pixels (px)
- based on screen width (em).
Following is an example.
<div style="border-width:1.2em;
border-color: rgb(120,120,120);
border-style:solid;
width:100px;">
<center>Test</center>
</div>
<br/>
<div style="border-width:1px;
border-color: rgb(120,120,120);
border-style:solid;
width:100px;">
<center>Test</center>
</div>
<br/>
<div style="border-width:medium;
border-color: rgb(120,120,120);
border-style:solid;
width:100px;">
<center>Test</center>
</div>
<br/>
And output is,
2)border-color:
In above example border-color also is mentioned. You can define border-color through several ways.
- Define color as by name. Like, border-color: blue, border-color: red.
- Color in rgb notation. Like, border-color: rgb(11,11,11).
- Hexadecimal value. Like, border-color: #aa00ee.
3)border-style:
There are different types of border styles which is defined by border-style.
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:dotted;
width:100px;">
<center>Dotted</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:dashed;
width:100px;">
<center>Dashed</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:solid;
width:100px;">
<center>solid</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:double;
width:100px;">
<center>double</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:groove;
width:100px;">
<center>groove</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:ridge;
width:100px;">
<center>ridge</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:inset;
width:100px;">
<center>inset</center>
</div>
<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:outset;
width:100px;">
<center>outset</center>
</div>
Output is,
For border-width, border-color and border-style there are foure special properties top-, bottom-, right- and left- which can be added. Like,
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: 10px;
border-right-style: solid;
border-right-color: green;
border-left-width: 10px;
border-left-style: solid;
border-left-color: orange;
4)border:
You can use border-width, border-style and border-color together by simply using border property.
So,
p {
border-width: 1.3em;
border-style: solid;
border-color: red;
}
Can be written into:
p {
border: 1.3em solid red;
}
Related Documents
No comments:
Post a Comment