CSS Border

CSS Border

The CSS border properties are used to style the border elements color, width, height. There important properties that are used to change the CSS borders are as follows:

  • Border-width
  • Border-color
  • Border-style

All three properties can be used together by using the border attributes.

<p style="border: 3px solid red;"> Hello world </p>

Hello world

In the above example, all three values are separated with space. 3px indicates the width, red indicates the color and solid indicates the style of the border.

Parts of CSS Border

There are four parts to each border:

  • Border-top
  • Border-left
  • Border-right
  • Border-bottom

The above four properties can be used to display each side of the border differently.

Border Width

Border width can be specified in pixels or one of the standard values thin, medium and thick.

Border-width: 10px;

Border Color

The border-color property is used to specify the color of the border. It can be specified as a color name or its hexadecimal value.

Border-color: red;

Border Style

There are eight possible styles for the border. These are solid, dashed, dotted, double, groove, ridge, inset and outset.

Border-style: dashed;

The width, color and style properties can also be applied to the individual parts of the border. In this case, the individual part must be specified in the statement as follows:

Border-top-style: solid;
Border-top-color: green;

The following values are allowed:

  • dotted 
    • Defines a dotted border
  • dashed 
    • Defines a dashed border
  • solid 
    • Defines a solid border
  • double 
    • Defines a double border
  • groove 
    • Defines a 3D grooved border. The effect depends on the border-color value
  • ridge 
    • Defines a 3D ridged border. The effect depends on the border-color value
  • inset 
    • Defines a 3D inset border. The effect depends on the border-color value
  • outset 
    • Defines a 3D outset border. The effect depends on the border-color value
  • none 
    • Defines no border
  • hidden 
    • Defines a hidden border
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p style="border-style: dotted;">A dotted css border.</p>
<p style="border-style: dashed;">A dashed css border.</p>
<p style="border-style: solid;">A solid css border.</p>
<p style="border-style: double;">A double css border.</p>
<p style="border-style: groove;">A groove border.</p>
<p style="border-style: ridge;">A ridge border.</p>
<p style="border-style: inset;">An inset border.</p>
<p style="border-style: outset;">An outset border.</p>
<p style="border-style: none;">No border.</p>
<p style="border-style: hidden;">A hidden border.</p>
<p style="border-style: dotted dashed solid double;">A mixed border.</p>

Output

css border

Reference

If you want to learn more about CSS visit the official website: Visit

css border

visit the CSS tutorial list. And make strong your CSS concept. Click here. wuschools.com is always written about the CSS concept for the CSS lover. Ang writes about how CSS makes your life easy if you are a web site developer. We help you to continue your learning.

Leave a Reply

Close Menu