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>

10 steps to start career in data science 5 Data Analytics Projects for Beginners 5 Excel Data Analysis Functions You Need to Know 5 Things in Your Resume from Getting Your First Job in Data Science 6 Ways Data Scientists Are Helping the Agricultural Sector 8 Strategies for Pharmaceutical Companies to Use Analytics for Success Applications of Data Science in the Retail Sector Best Data Analytics training in Dehradun Why to learn Best Data science Training in Dehradun Categories of SQL command to know for Data Analysis