CSS Border
Css border properties are used to set the size ,style and color of element's border.
Syntax:
border-property:value;
Border properties used in css are:
border
border-color
border-width
border-style
Example:
border-style:solid;
border-width:3px;
border-color:red;
Border Style
This property is used to set the style of border like solid ,dotted etc.
Syntax:
border-style:value;
values are==>>solid,dotted,double,groove,dashed,inset,outset,ridge etc.
How to set individual border style?
We can set the border style of individual side.
Syntax:
border-direction-style:value;
Example:
border-left-style:dotted;
border-right-style:solid;
border-top-style:dashed;
border-bottom-style:groove;
Short Program
<html>
<head>
<style>
p{
border:1px solid;
border-left-style:dotted;
border-right-style:solid;
border-top-style:dashed;
border-bottom-style:groove;
}
</style>
</head>
<body>
<p>This is some paragraph inside stylish border. </p>
</body>
</html>
Outcome:
This will display paragraph with stylish border with different style on each side.
Border Color
This property is used to change the border color.
Syntax:
border-color:value;
Example:
border-color:red;
How to set individual border color?
Syntax:
border-direction-color:value;
Example:
border-left-color:red;
border-right-color:green;
border-top-color:blue;
border-bottom-color:yellow;
Short Program
<html>
<head>
<style>
p{
border:1px solid;
border-left-style:dotted;
border-right-style:solid;
border-top-style:dashed;
border-bottom-style:groove;
border-left-color:red;
border-right-color:green;
border-top-color:blue;
border-bottom-color:yellow;
}
</style>
</head>
<body>
<p>This is some paragraph inside stylish border. </p>
</body>
</html>
Outcome:
This will display paragraph with stylish border with different style and color on each side.
Border Width
Border width is used to set the size of border.
Syntax
border-width:size;
Example
border-width:5px;
Border Shorthand Property
Border shorthand property is a simple way to declare all of border properties in single statement.
Syntax
border:border-width border-style border-color;
Example
border:2px solid black;
Advance Properties
Border Radius
Border radius property is used to round the border corner and its a css 3 advanced property.
Syntax
border-radius:value;
Example
border-radius:25px;
How to create round corner box?
<html>
<head>
<style>
div{
width:200px;
height:80px;
border:2px solid green;
border-radius:25px;
}
</style>
</head>
<body>
<div>
<h3>
Round Corner Box
</h3>
</div>
</body>
</html>
How to set the individual corner of the box?
Individual Border Radius
Examplesborder-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
Short Code
How to create round corner box?
<html>
<head>
<style>
div{
width:200px;
height:80px;
border:2px solid green;
border-bottom-left-radius:25px;
}
</style>
</head>
<body>
<div>
<h3>
Bottom Left Round Corner
</h3>
</div>
</body>
</html>
