How to create Border in CSS (Cascading Style Sheet)

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

 

  1. Border Color: 
  2. 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>

border in css

If border on one side of the CSS

If border on one side of the text

  • Border-top
  • Border-right
  • Border-bottom
  • Border-left
sequence is top right bottom left as given in the example below

 

<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>

Open chat