CSS Borders

❮ Prev Next ❯

The border is a thin layer between padding and margin. Editing the border you can make elements draw their perimeter on screen.

You can work on borders by using those properties:

  • border-style
  • border-color
  • border-width

The property bordercan be used as a shorthand for all those properties.

border-radius is used to create rounded corners.

You also have the ability to use images as borders, an ability given to you by border-image and its specific separate properties:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

Let's start with border-style .

The border style

The border-style property lets you choose the style of the border. The options you can use are:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A mixed border.

The default for the style is none so to make the border appear at all you need to change it to something else. solidis a good choice most of the times.

You can set a different style for each edge using the properties

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

or you can use border-stylewith multiple values to define them, using the usual Top-Right-Bottom-Left order: 

p {
  border-style :solid dotted solid dotted;
}

The border width

border-width is used to set the width of the border.

You can use one of the pre-defined values:

  • thin
  • medium (the default value)
  • thick

or express a value in pixels, em or rem or any other valid length value.

Example: 

p{
  border-width :2px;
}

You can set the width of each edge (Top-Right-Bottom-Left) separately by using 4 values: 

p{
  border-width :2px 1px 2px 1px;
}

or you can use the specific edge properties border-top-width, border-right-width, border-botton-width, border-lef-width.

The border color

border-color is used to set the color of the border.

If you don't set a color, the border by default is colored using the color of the text in the element.

You can pass any valid color value to border-color.

Example: 

p{
  border-color :yellow
}

You can set the color of each edge (Top-Right-Bottom-Left) separately by using 4 values: 

p{
  border-color :black red yellow blue;
}

or you can use the specific edge properties border-top-color, border-right-color, border-botton-color, border-lef-color.

The border shorthand property

Those 3 properties mentioned, border-width, border-style, border-color can be set using the shorthand propertyborder.

Example: 


  p {
  border :2px black solid;
}

You can also use the edge-specific propertiesborder-top, border-right, border-botton, border-left.

Example: 

p{
  border-left :2px black solid;
  border-right :3px black solid;
}

The border radius

border-radiusis used to set rounded corners to the border. You need to pass a value that will be used as the radius of the circle that will be used to round the border.

Usage: 


  p {
  border-radius :5px;
}

You can also use the edge-specific properties border-top-left-radius, border-top-right-radius , border-bottom-left-radius, border-bottom-right-radius.

Using images as borders

One very cool thing with borders is the ability to use images to style them. This lets you go very creative with borders.

We have 5 properties:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

and the shorthand border-image. I won't go in much details here as images as borders would need a more in-depth coverage as the one I can do in this little chapter.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        .solid{
          border-style:solid;
        }
        .dotted{
          border-style:dotted;
        }
        .double{
          border-style:double;
        }
        .groove{
          border-style:groove;
        }
        .short-hand{
          border:2px solid green;
        }
        .combine{
          border-style:solid dotted solid dotted;
        }
        .radius{
          border-radius:5px;
          border:solid 2px green;
        }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <div> 
        <h3>welcome to Coding Koleji </h3>
        <p class="solid">this is border solid</p>
        <p class="dotted">this is dotted border</p>
        <p class="double">this is double border</p>
        <p class="groove">this is groove border</p>
        <p class="radius">this is border radius</p>
        <p class="combine">this combinations of solid dotted solid dotted</p>
        <p class="short-hand">this is short hand with 2px border-with, solid border-style and green border-color</p>
      </div>
    </body>
  </html>
❮ Prev Next ❯