Table of Contents
How to create Border in CSS (Cascading Style Sheet)
Border Propertied in CSS:
In CSs Border has three properties such as
1.Border width:
it means the width of border
It can be 1px 2px …10px.. and so on.
2.Border Style:
CSS has 10 styles of border
No | Border Style |
1 | Solid |
2 | Dotted |
3 | Dashed |
4 | Double |
5 | Grooved |
6 | Ridge |
7 | Inset |
8 | Outset |
9 | None |
10 | Mix |
- Border Color:
- its can be red ,blue ,green or any color code .
Border Code of the above can be like this .
Example:
border-width :2px;
border-style: solid;
border-color: blue;
CODE OF BORDER IN CSS
Example :
<html>
<head>
<title> CSS border</title>
<style>
h1 {
border-width:3px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<h1>this is my border</h1>
</body>
<html>
CSS short Hand
If we want to write the code in one line it called CSS short hand .
You need not to write three different line .
border:3px dashed green;
Example:
<html>
<head>
<title> CSS border</title>
<style>
h1 {
border:3px dashed green;
}
</style>
</head>
<body>
<h1>this is my border</h1>
</body>
<html>
If border on one side of the CSS
If border on one side of the text
- Border-top
- Border-right
- Border-bottom
- Border-left
<html>
<head>
<title> CSS border</title>
<style>
h1 {
border-width:3px;
border-top:solid;
border-color:red;
}
h2
{
border-width:4px;
border-style:solid dotted dashed dotted;
border-color: green;
}
</style>
</head>
<body>
<h1>this is my border</h1>
<h2> this is border 2</h2>
</body>
<html>
