Table of Contents
CSS Border Property
- The border property is a shorthand property.
- Using this border property we insert the border width, border style, and border color.
CSS Syntax→ border: border-width border-style border-color;
CSS border-width Property
- Using border-width property set the width of the border. Default value is “medium”.
Note:- Always declare the border-style property before the border-width property. An element must have borders before you can set the width.
CSS Syntax→ border-width: medium|thin|thick|length;
- The medium set a medium border. This is default.
- The thin Set thin border.
- The thick Set a thick border.
- The length Allows you to define the thickness of the 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: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Border 5px.</p>
<p class="two">Border Medium.</p>
<p class="three">Border 1px.</p>
</body>
</html>CSS border-style Property
- Using border-style property set the style of the border. Default value is “none”.
CSS Syntax→ border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
- none Default value. Specifies no border.
- hidden The same as “none”, except in border conflict resolution for table elements.
- dotted this is used to set a dotted border.
- dashed this is used to set a dashed border.
- solid this is used to set solid border.
- double this is used to set double border.
- groove this is used to set a 3D grooved border. The effect depends on the border-color Value.
- ridge this is used to set 3D ridged border. The effect depends on the border-color value.
- inset this is used to set 3D inset border. The effect depends on the border-color value.
- outset this is used to set a 3D outset border. The effect depends on the border-color value.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.hidden {border-style: hidden;}
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;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</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>
</body>
</html>CSS border-color Property
- Using border-color property set the color of the border. Default value is the color of the text.
CSS Syntax→ border-color: color|transparent;
- color set the background color.
- list of possible color values. Default color is black.
- transparent set that the border color should be transparent.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<p class="one">Red border</p>
<p class="two">Green border</p>
</body>
</html>