How to Use the CSS Border| Border Shorthand Property

CSS Border:

Using CSS elements such as border properties – div, paragraph and image can be added to the four sides of the line. Now we’ll look at the basics of CSS box model that is used in conjunction with some of the borders and at the CSS Properties. Property borders of this number do not think that is very difficult to see.

Basically, it is very straightforward. Using the CSS border color, style and width, etc. can be set. Color, thickness and line style of elements to create a boundary around the area of the box is determined by the CSS border. Notice the image below.

CSS border property:

CSS Border Properties is shorthand, by which the properties can be set with multiple borders. If the border style is not determined, the border will not be made. Border properties are: Border-Style, Border-Width, Border-color, Border: (border-style, border-width, border-color)

CSS border-style property:

Four boxes of any type, such as border – none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, and is used for determining these properties.

  • border-style: solid ; : [All sides] borders
  • border-style: dashed double; : [top, bottom] [left, right] borders
  • border-style: dashed double dotted ; : [top] [left] [right] [bottom] borders
  • border-style: solid dashed double dotted ; : [top] [right] [bottom] [left] borders

Using measure up to 1-4 different style for each border can be added.

Property ValueDescription
border-styleSolid, double, groove, ridge, inset, outset, dotted, dashed, noneTop, bottom, left and right borders

 

Up-down, right, left to set the border style of management is required, the value –

Property ValueDescription
border-top-styleSolid, double, groove, ridge, inset, outset, dotted, dashed, noneThe top border
border-right-styleThe right border
border-bottom-styleThe bottom border
border-left-styleThe left border

 

CSS Border Style values:

ValueDescription
dottedThe borders will be created by the square dots
DashedThe border will be created by short lines
SolidThe borders will be created by solid
DoubleThe borders will be created by two solid
grooveBorder appears to be carved into the page
RidgeBorder appears to stick out from the page
insetBorder appears to be embedded into the page
OutsetBorder appears to be coming out of the screen
noneThe border will not be created on any side.

 

Declaration Syntax :

P{border-style: solid;}
P{border-style: dashed;}
P{border-style: dotted;}

Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{font-family:verdana;}
h2, h3, span{border-width:medium; border-color:#000000;}
.demo1{border-style: dotted;}
.demo2{border-top-style: dotted; border-right-style: double;
		border-bottom-style: dashed; border-left-style:groove;}
</style>
</head>
<body>
<h2 class="demo1"> Here I have specified a dotted border.</h2>
<h3 class="demo2"> Here specifies four style.</h3>
<p>Specifies a <span class="demo1">dotted</span>border</p>
</body>
</html>

Display in Browser:

CSS border-width property:

Border Style Properties with these properties can be set using the wide border. Border properties to determine how dark or thin with the number of units with a value em, px, cm, or several borders as the default name or keywords – thin, thick, medium is referring to.

  • border-width: 2px ; [All sides] borders
  • border-width: 2px 4px ; [top, bottom] [left, right] borders
  • border-width: 2px 4px 6px ; [top] [left] [right] [bottom] borders
  • border-width: 2px 4px 6px 8px ; [top] [right] [bottom] [left] borders

CSS border-width properties:

Property ValueDescription
border-widthThin, medium (default), thick or lengthTop, bottom, left and right borders

 

Border on the bottom or left to right to set the required value individually wide of the border:

Property ValueDescription
border-top-widththin, medium, thick or lengthtop border
border-right-widththin, medium, thick or lengthright border
border-bottom-widththin, medium, thick or lengthbottom border
border-left-widththin, medium, thick or lengthleft border

 

CSS declaration and sample:

P {border-width: 9px; border-style: solid ;}
P {border-width: medium; border-style: dashed ;}

Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:verdana;}
p{border-style:solid; border-color:#666;}
.example1{border-width:10px;}
.example2{border-width:thick;}
.example3{border-width:3px 6px 9px 12 px;}
</style>
</head>
<body>
<p class="example1">Border-width in pixels.</p>
<p class="example2">Border-width in keywords.</p>
<p class="example3">Border-width for individual sides.</p>
</body>
</html>

Display in Browser:

css border width property

CSS border-color property:

Border color can be set using the Properties. Color management is the value used for sizing – hex, values, rgba (), hsla () or the color name (keywords), and so on. Shorthand properties can be determined using the color on each side of the border. For example:

  • border-color: #85b9e9 ; [All sides] borders
  • border-width: #85b9e9 #bde9ba ; : [top, bottom] [left, right] borders
  • border-width: #85b9e9 #bde9ba #ffd37d ; [top] [left] [right] [bottom] borders
  • border-width: #85b9e9 #bde9ba #ffd37d #d1d1d1 ; :  [top] [right] [bottom] [left] borders

CSS border-color properties:

Property ValueDescription
border-colorColor code or nameTop, bottom, left and right borders

Border on the bottom or left to right to set the required value individually wide of the border:

Property ValueDescription
border-top-colorColor code or nametop border
border-right-colorColor code or nameright border
border-bottom-colorColor code or namebottom border
border-left-colorColor code or nameleft border

 

CSS declaration and sample:

P {border-color: #0000FF; border-style: solid ;}
P {border-color: red; border-style: dotted ;}

Example :

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:verdana;}
p{border-style:solid; border-width:10px;}
.example1{border-color:#fa4b2a;}
.example2{border-color:blue;}
.example3{border-color:#fa4b2a blue yellow green;}
</style>
</head>
<body>
<p class="example1">Border-color using hex codes. </p>
<p class="example2">Border-color using color name.</p>
<p class="example3">Border-color shorthand for individual sides.</p>
</body>
</html>

Display in Browser:

css border color property

Use CSS border-Shorthand:

Using Shorthand Border Properties Border -width, border –style, border -color, and you can set all at once. The following table using the individual side of the border can be used specifically for certain. The style of the two should be confused when they receive all the latest styles.

Tables: CSS Border Shorthand:

Property ValueDescription
border(width, style, color)Set border for all edges at once.
border-top 

Width, style, color

 

Set border for individual edges

border-right
border-bottom
border-left

 

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:verdana;}
p{border:5px solid #fa4b2a;
border-top-width:10px;
border-right-style:double;
border-left-color:#009900;
border-bottom-style:ridge;
width:600px;}
</style>
</head>
<body>
<p>Using CSS elements such as border properties - div, paragraph, image can be added to the four sides of the line. </p>
</body>
</html>

Display in Browser:

css border shortcut

Example: CSS Border Properties to block the view:

Let’s follow the CSS Border Style Properties (color, style and width, etc.), let’s look. The box model – let’s show them what will be the effect. To create borders, we p, body, div, etc., can use the element. Below are examples of the application of these methods are discussed.

Example: p element is applied using the border.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:verdana;}
p{border:5px solid #fa4b2a;

border-top:5px dashed #009900;
border-right:5px double #666; width:500px;}
</style>
</head>
<body>
<p>Using CSS elements such as border properties - div, paragraph, image can be added to the four sides of the line. </p>
</body>
</html>

Display in Browser:

p element

 

Example: body element using the border to be applied.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{border-style:dotted; border-width:5px; border-color:red;}
</style>
</head>
<body>
<p>CSS style of the border properties  can change a border color, border width or border style. </p>
</body>
</html>

Display in Browser:

border with body element
Example: div element using the border to be applied.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{border-style:dashed; border-width:5px; border-color:green;}
</style>
</head>
<div>
CSS style of the border properties  can change a border color, border width or border style.
</div>
</html>

Display in Browser:

div with border

 

Leave a Reply

Your email address will not be published. Required fields are marked *