 |
| CSS Border |
CSS BORDER
I have a red border on Bottom side.
_________________________
I have a red border on Top side.
I have borders on all sides.
| I have a blue left border.
Example
<!DOCTYPE html>
<html>
<head>
<title> Border Style </title>
<style>
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge { border-style: ridge; }
p.inset { border-style: inset; }
p.outset { border-style: outset; }
p.none { border-style: none; }
p.hidden { border-style: hidden; }
p.mix { border-style: dotted dashed solid double; }
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Result
Border-width
The border width property specifies the width of the four borders.
The width can be set as a specific size ( in px, pt, em, cm etc ) or by using on of the three pre-defined values : thin, medium or thick.
The border-width property can have from one to four values ( for the top border, right border, bottom border and the left border. ).
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>his property specifies the width of the four borders:</p>
<p class="one">some text.</p>
<p class="two">some text.</p>
<p class="three">some text.</p>
<p class="four">some text.</p>
<p class="five">some text.</p>
<p class="six">some text.</p>
<p class="seven">some text.</p>
</body>
</html>
Result
Border Color
The border color property is used to set the color of the four borders colors.
- The Boder can be set by :-
- Name :- Specifies the color name ,like "Red".
- Hex :- Specifies the hex value,like #f00;
- RGB :- Specifes the RGB value, like "rgb(255, 0, 0)"
- Transparent
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
If border-color is not set, it inherits the color of the element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color; red green blue yellow;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">Kumar Atul Jaiswal. A solid red border</p>
<p class="two">Kumar Atul Jaiswal. A solid red border</p>
<p class="three">Kumar Atul Jaiswal. A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first</p>
</body>
</html>
Result
Border Short-Hand Property
The border property is a shorthand property for the following individual border properties:
- border-width
- border-style (required)
- border-color
Left Border
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-left: 6px solid red;
background-color : lightgrey;
}
</style>
</head>
<body>
<h2>The border left Property</h2>
<p>his property is a shorthand property for border-left-width, border-left-style, and border-left-color.: Kumar Atul Jaiswal.</p>
</body>
</html>
Result
Bottom Border
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-bottom: 6px solid red;
background-color : lightgrey;
}
</style>
</head>
<body>
<h2>The border bottom Property</h2>
<p>his property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.: Kumar Atul Jaiswal.</p>
</body>
</html>
Result
Rounded Border
The border-radius property is used to add rounded borders to an element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal1 {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius : 5px;
}
p.round2 {
border: 2px solid red;
border-radius : 8px;
}
border: 2px solid red;
border-radius : 12px;
}
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal1">Kumar Atul Jaiswal. Normal Border</p>
<p class="round1">Kumar Atul Jaiswal. Round Border</p>
<p class="round2">Kumar Atul Jaiswal. Rounder border</p>
<p class="round3">Kumar Atul Jaiswal. Roundest border</p>
<p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions</p>
</body>
</html>
Result
Video Tutorial :- SooN
Have a Nice Stay Here : - )
0 comments:
Post a Comment
For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.