HtmlCssMonk

Borders In CSS | Learn Basic CSS

business, cellphone, codes

DESCRIPTION

Border properties simply allows you to specify how the border of your content should look like.

There are three properties of a border you can change −

  • The border-color specifies the color of a border.
  • The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
  • The border-width specifies the width of a border.

Border Color

Border color property of CSS allows us to change the color of border surrounding the element.

We can also change the colors of each side individually using these properties

  • border-bottom-color changes the color of bottom border.
  • border-top-color changes the color of top border.
  • border-left-color changes the color of left border.
  • border-right-color changes the color of right border.

EXAMPLE –

<html>

<head>
  <style type="text/css">
    p.example1 {
      border: 1px solid;
      border-bottom-color: #009900;
      /* Green */
      border-top-color: #FF0000;
      /* Red */
      border-left-color: #330000;
      /* Black */
      border-right-color: #0000CC;
      /* Blue */
    }

    p.example2 {
      border: 1px solid;
      border-color: #e78403;
      /* Orange */
    }
  </style>
</head>

<body>
  <p class="example1">
    Every border with different color.
  </p>

  <p class="example2">
    All borders have same color.
  </p>
</body>

</html>

This Code will produce the following result on your webpage –


Border Style

Border style property of CSS allows us to change the color of border surrounding the element.

We can also change the style of each side individually using these properties

  • border-bottom-style changes the style of bottom border.
  • border-top-style changes the style of top border.
  • border-left-style changes the style of left border.
  • border-right-style changes the style of right border.

Some border style values are –

ValueDescription
noneIt doesn’t define any border.
dottedIt is used to define a dotted border.
dashedIt is used to define a dashed border.
solidIt is used to define a solid border.
doubleIt defines two borders wIth the same border-width value.
grooveIt defines a 3d grooved border. effect is generated according to border-color value.
ridgeIt defines a 3d ridged border. effect is generated according to border-color value.
insetIt defines a 3d inset border. effect is generated according to border-color value.
outsetIt defines a 3d outset border. effect is generated according to border-color value.

EXAMPLE –

<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> 

This Code will produce the following result on your webpage –


Border Width

Border width property of CSS allows us to change the width of the border surrounding the element.

We can also change the width of each side individually using these properties

  • border-bottom-width changes the width of bottom border.
  • border-top-width changes the width of top border.
  • border-left-width changes the width of left border.
  • border-right-width changes the width of right border.

EXAMPLE –

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –

Note – The border will be invisible if its style is not defined. This is because the style defaults to none.


Next topic – Background in CSS

Previous topic – Margin in CSS


Leave a Comment

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