CSS Border Properties
- Introduction to CSS Border Properties
- CSS border style property
- CSS border width property
- CSS border color property
- CSS borderradius property
- CSS border shorthand property
Introduction to CSS Border Properties
The CSS border of any element separates it from other elements. You can make the webpage even more attractive by designing borders. CSS provides four properties that allow you to design an attractive and more advance border. CSS border properties are given below.
- border-style
- border-width
- border-color
- border-radius
- border shorthand
We will discuss all these properties below in detail. Let's try to understand them.
CSS border style property
You can define the style of the border by the border-style property. There are predefined values of this property. If you want to give "none" value for this property then you can’t see the border. The list of values has been given below.
- none - This value does not show the border of the element.
- solid - With this value, you can define a solid boundary.
- double - When you give this value, the border will be in double line.
- dashed - When you give this value, the border will be in the dash(--).
- dotted - With this value, you can show the border in dotted (….).
- groove - This value shows the grooved border.
- ridge - By using this value you can make the border ridged.
- inset - With this value, you can show inset border.
- outset - With this value, you can show offset border.
The border-style property has been explained through the below example.
<!DOCTYPE html>
<html>
<head>
<title> Border Style Example </title>
<style>
p{
width: 36%;
text-align: justify;
}
#none{
border-style: none;
}
#solid{
border-style: solid;
}
#double{
border-style: double;
}
#dash{
border-style: dashed;
}
#dot{
border-style: dotted;
}
#groov{
border-style: groove;
}
#ridg{
border-style: ridge;
}
#ins{
border-style: inset;
}
#outs{
border-style: outset;
}
</style>
</head>
<body>
<div>
<p id=" none"> This is the example of border style where you can get the output of border without line using the "none" value for the border-style property in CSS. </p>
<p id="solid"> This is the example of border style where you can get the output of border in solid line using the "solid" value for the border-style property in CSS. </p>
<p id="double"> This is the example of border style where you can get the output of border in double line using the "double" value for the border-style property in CSS. </p>
<p id="dash"> This is the example of border style where you can get the output of border in dashed line using the "dashed" value for the border-style property in CSS. </p>
<p id="dot"> This is the example of border style where you can get the output of border in dotted line using the "dotted" value for the border-style property in CSS. </p>
<p id="groov"> This is the example of border style where you can get the output of border in groove line using the "groove" value for the border-style property in CSS. </p>
<p id="ridg"> This is the example of border style where you can get output of border in ridge line using the "ridge" value for the border-style property in CSS. </p>
<p id="ins"> This is the example of border style where you can get the output of border in inset line using the "inset" value for the border-style property in CSS. </p>
<p id="outs"> This is the example of border style where you can get the output of border in outset line using the "outset" value for the border-style property in CSS. </p>
</div>
<style>
p{
width: 36%;
text-align: justify;
}
#none{
border-style: none;
}
#solid{
border-style: solid;
}
#double{
border-style: double;
}
#dash{
border-style: dashed;
}
#dot{
border-style: dotted;
}
#groov{
border-style: groove;
}
#ridg{
border-style: ridge;
}
#ins{
border-style: inset;
}
#outs{
border-style: outset;
}
</style>
</head>
<body>
<div>
<p id=" none"> This is the example of border style where you can get the output of border without line using the "none" value for the border-style property in CSS. </p>
<p id="solid"> This is the example of border style where you can get the output of border in solid line using the "solid" value for the border-style property in CSS. </p>
<p id="double"> This is the example of border style where you can get the output of border in double line using the "double" value for the border-style property in CSS. </p>
<p id="dash"> This is the example of border style where you can get the output of border in dashed line using the "dashed" value for the border-style property in CSS. </p>
<p id="dot"> This is the example of border style where you can get the output of border in dotted line using the "dotted" value for the border-style property in CSS. </p>
<p id="groov"> This is the example of border style where you can get the output of border in groove line using the "groove" value for the border-style property in CSS. </p>
<p id="ridg"> This is the example of border style where you can get output of border in ridge line using the "ridge" value for the border-style property in CSS. </p>
<p id="ins"> This is the example of border style where you can get the output of border in inset line using the "inset" value for the border-style property in CSS. </p>
<p id="outs"> This is the example of border style where you can get the output of border in outset line using the "outset" value for the border-style property in CSS. </p>
</div>
</body>
</html>
In the above example, the style of the border has been defined. This will show all type of CSS border around the div. The example will produce the below output.
CSS border width property
If you do not want to use the default width of the border and want to change it, you can do this by using border-width property. With this property, you can customize the width of the border accordingly.
The value of this property you can give in pixels. It has been explained through the below example.
<!DOCTYPE html>
<html>
<head>
<title> Border Width Example</title>
<style>
#MbhDiv {
border-style: solid;
border-width: 8px;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> This is the example of border width where you can get output of border in thick line using the 8px value for the border-width property in CSS. </P>
</div>
<style>
#MbhDiv {
border-style: solid;
border-width: 8px;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> This is the example of border width where you can get output of border in thick line using the 8px value for the border-width property in CSS. </P>
</div>
</body>
</html>
In this example, the width of the border has been defined 8px. This will increase the thickness of the border to 8px. This example generates the below output.
CSS border color property
If you want to change the color of the entire border, then you can do this by using the border-color property. The value of this property can be given with color name and can also be given in hex. It has been explained through the below example.
<!DOCTYPE html>
<html>
<head>
<title> Border Color Example </title>
<style>
#MbhDiv {
border-style: solid;
border-width: 8px;
border-color: red;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> This is the example of border color where you can get output of border in red color line using the "red" value for the border-color property in CSS. </p>
</div>
<style>
#MbhDiv {
border-style: solid;
border-width: 8px;
border-color: red;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> This is the example of border color where you can get output of border in red color line using the "red" value for the border-color property in CSS. </p>
</div>
</body>
</html>
In the above example, the color of the border is defined as red. By default it is black. This will make the border color red. This example will generate below output.
CSS border radius Property
If you want to curve the border corners of an element or give shape, then you can use the border-radius property. You can give the value of this property in pixels and also in percent(%). It can be explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Border Radius Example </title>
<style>
#MbhDiv {
border-style: solid;
border-width: 8px;
border-color: green;
border-radius: 20px;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> This is the example of border radius where you can get output of border corner in the curve line using the 20px value for the border-radius property in CSS. </P>
</div>
<style>
#MbhDiv {
border-style: solid;
border-width: 8px;
border-color: green;
border-radius: 20px;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> This is the example of border radius where you can get output of border corner in the curve line using the 20px value for the border-radius property in CSS. </P>
</div>
</body>
</html>
The above example generates the below output.
CSS border shorthand property
If you want to define the given properties in the single statement, then you can use the border shorthand property.
By this property, you can define the value of all the properties that are given above. The syntax of this property has been given below.
Syntax:- border: border-width | border-style | border-color;
Example:- border: 1px solid red;
As you can see the values of border property, first you give the value of border-width. After this, you define the border style and then the color of the border. Border radius property is not included in it. This property has been explained through an example below.
<!DOCTYPE html>
<html>
<head>
<title> Border Shorthand Example </title>
<style>
#MbhDiv {
border: 8px solid blue;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> Border short hand property is a short version of all properties which is defined above but it does not include a value for border-radius property </p>
</div>
<style>
#MbhDiv {
border: 8px solid blue;
width: 25%;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
<p> Border short hand property is a short version of all properties which is defined above but it does not include a value for border-radius property </p>
</div>
</body>
</html>
In the above example, all the properties have been defined by a single statement. This example will produce the below output.
The information you have posted is very useful. The sites you have referred was good. Thanks for sharing... Affinity at serangoon price
ReplyDeleteInteresting blog! Is your theme custom made or did you download it from somewhere?
ReplyDeleteA theme like yours with a few simple adjustements would really make my blog shine.
Please let me know where you got your design. Thanks
This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information... website agency san francisco
ReplyDelete