Hey Friends, in the last tutorial we have seen about the CSS
background property. Now, this tutorial is based on CSS Border Property. So let’s
begin...
CSS Border
Property
The CSS border property is a property that is used to set
the border of Html elements. This property is used to specify the color, style
and the size of the border of an element. There are some border property shown
below:-
- Border-color
- Border-style
- Border-radius
- Border-width
Now we are going to discuss these properties in detail.
1) Border Color CSS Property
This border property is used to specify the color of the border. There are 3 methods to set the color of the border these are:-
- Name:- It Specifies the name of the color. For Example:- “Red”, “Yellow” etc
- RGB :- It Specifies the RGB value of the color. For Example :- rgb(0,0,0,0), rgb(1,8,6,2.5) etc
- Hex :- It Specifies the hex decimal value of the color. For Example :- #ff000, #f2f2f2 etc
Example:-
<style>
body{
display: flex;
}
div{
margin: 10px;
}
#first {
border-style: solid;
border-color: red;
width: 23%;
height: 20%;
}
#second {
border-style: solid;
border-color: rgb(0, 0,0);
width: 23%;
height: 20%;
}
#third{
border-style: solid;
border-color: #7f23d4;
width: 23%;
height: 20%;
}
</style>
Output:-
2) Border Style CSS Property
This CSS Border Style Property is used to specify the border type which you want to display in your Html file. There is a lot of border-style value from where you can select the different types of border style to border an element.
- None
- Dotted
- Dashed
- Solid
- Double
- Groove
- Inset
- Outset
- Ridge
Example:-
<html>
<head>
<title> CSS Border Property </title>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
Output:-
3) Border Width CSS Property
This property is used to set the width or the border. It is set in pixels. You can also select from pre-defined values like - thin, thick, and medium.
Note: - This property is not worked alone means you have to use border-style property first then you can set the width of the border.
Example:-
<html>
<head>
<title> CSS Border Property </title>
<style>
body{
display: flex;
}
div{
margin: 10px;
}
#first {
border-style: solid;
border-color: red;
border-width: 1px;
width: 23%;
height: 20%;
}
#second {
border-style: solid;
border-color: rgb(0, 0,0);
border-width: thick;
width: 23%;
height: 20%;
}
#third{
border-style: solid;
border-color: #7f23d4;
border-width: 10px;
width: 23%;
height: 20%;
}
</style>
</head>
<body>
<div id="first">
Lorem ipsum dolor sit, id, ab aspernatur officiis, hmagnam atque pariatur alias iure itaque facere placeat
nesciunt enim odit corporis? Provident.
</div>
<br>
<br>
<div id="second">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab pariatur modi amet deleniti, quisquam alias
accusantium ipsa veritatis! Voluptate delectus nihil veritatis facere autem voluptatum et!
</div>
<br><br>
<div id="third">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, qui.
</div>
</body>
</html>
Output:-
So Friend that’s all for this tutorial as you can see I have told only three property border-style, border-color, & border-width the last property is border-radius. We will discuss it in the next tutorial because the content of this property is very large so I thought that I have to make a separate tutorial on this topic.
People Also Read :- CSS Background Property
People Also Read :- How to Add CSS in HTML File.
0 comments:
Post a Comment