×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

CSS3

Introduction to CSS

Component of CSS


CSS border



In CSS we can also set the styling for the border of our element by using the border properties.
Let's understand these peoperties one-by-one.


Border-style



This allows you to select the style of border which you want to display . Some of the values are as follows explained in the program :-
<!DOCTYPE html>

<html>

<head>

<style>

.firstborder{

      border-style:dotted;

}

.secondborder{

      border-style:dashed;

}

.thirdborder{

      border-style:solid;

}

.forthborder{

      border-style:double;

}

.fifthborder{

      border-style:groove;

}

.sixthborder{

      border-style:ridge;

}

.seventhborder{

      border-style:inset;

}

.eightborder{

      border-style:outset;

}

.ninthborder{

      border-style:none;

}

.tenthborder{

      border-style:hidden;

}

</style>

</head>

<body>

<p class="firstborder">firstborder </p>

<p class="secondborder">secondborder </p>

<p class=" thirdborder">thirdborder </p>

<p class="forthborder"> forthborder</p>

<p class="fifthborder">fifthborder </p>

<p class="sixthborder">sixthborder </p>

<p class="seventhborder">seventhborder </p>

<p class="eightborder">eightborder </p>

<p class="ninthborder">ninthborder </p>

<p class=" tenthborder">tenthborder </p>

</body>

</html>


Output of the Program



dotted border


dashed border


solid border


double border


groove border


ridge border


inset border


outset border


none border


hidden border


Here in the above program dotted, dashes , solid , double, groove, ridge, inset, outset, none and hidden are the values.

Let's understand what these values are responsible for:-



Values Description
dotted Defines a dotted border
dashed Defines a dashed border
solid Defines a solid border
double Defines a double border
groove Defines a groove border
ridge Defines a ridge border
inset Defines a inset border
outset Defines a outset border
none Defines a none border
hidden Defines a hidden border


Border-width



This allows you to adjust the width of border which you want to display . We can set this width by using the following values:-

  • thin
  • thick
  • medium
  • length(in pt px cm etc.)



Before providing the border-width property we must set the border-style-property first.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

p{

          border-style:solid;

          border-width:5px;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the border-width of 5px in the paragraph. And here we can also set the values to thin, thick, medium etc.



Border-color



This allows you to change the color of the border which you want to display . We can set this color by using the following values:-

  • color name
  • Hex values (#ff0000)
  • RGB values "rgb(255,0,0)"
  • transparent



Before providing the border-color property we must set the border-style-property first.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

.red{

          border-style:solid;

          border-color:red;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p class="red"> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the border-color of red in the paragraph. And here we can also set the values to RGB, Hex values,transparent etc.





Border



This allows you to change the style,width and color property of the border in a single line which you want to display .

    Order of writing background shorthand property
  1. border-width
  2. border-style(important)
  3. border-color



And the same above order we have to follow if we want to use background shorthand property, we can also omit the properties if we want but the order again will be same and the background-style property is very must.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

p{

          border: 5px solid green;

}

</style>

</head>

<body>

<p>I am Manish </p>

<p> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the border-size, border-style and border-color by specifying these properties in single line.




Some more border properties in CSS



Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders






CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute