CSS Borders

Borders in CSS

The CSS Borders property allows you to customize the borders of HTML elements.In order to add a border to the element, you need to specify the size, style, and color of the border.

i. border-style
ii. border-color
iii. border-width


CSS border-style:

The default value of border-style is none, which defines no border.

There are various styles supported for the border-style property: dotted, dashed, double, etc

1. none : It doesn’t define any border.

2. dotted: It is used to define a dotted border.

3. dashed: It is used to define a dashed border.

4. solid :It is used to define a solid border.

5. double: It defines two borders with the same border-width value.

6. groove: It defines a 3d grooved border. effect is generated according to border-color value.

7. ridge: It defines a 3d ridged border. effect is generated according to border-color value.

8. inset : It defines a 3d inset border. effect is generated according to border-color value.

9. outset : It defines a 3d outset border. effect is generated according to border-color value.

Example:

             

<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
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.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No 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>
<p class="hidden">A hidden border.</p>
</body>
</html>    

CSS border-width:

The properties for the border can be set separately. The border-width property specifies the width 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">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>

CSS border-color:

The border color of the element can be defined using a color name, RGB, or Hex values.

Name: It specifies the color name. For example: “green”.
RGB: It specifies the RGB value of the color. For example: “rgb(255,0,0)”.
Hex: It specifies the hex value of the color. For example: “#ff0000”.

There is also a border color named “transparent”. If the border color is not set it is inherited from the color property of the element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}
p.two {
    border-style: solid;
    border-color: #98bf21;
} 
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>


Recommended Posts:

Spread the love

Leave a Comment

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