CSS - Borders Property

A border, in the context of design and styling, refers to a decorative or functional element that surrounds the content of an object, such as a text box, image, or any other HTML element on a web page.

The border property is used to create a border around an element, such as a div, image, or text. It allows you to customize the appearance of the border, including its color, width, and style.

Borders play a vital role in the overall aesthetics and design of the webpage.

Importance of borders

The importance of using borders in CSS can be summarized as follows:

Visual separation: Borders help to visually separate different elements on a webpage, making it easier for users to understand the layout and navigation.
Organization and structure: Borders can be given to grids, tables or even boxes that makes the content look more organized and structured.
Emphasis and focus: Borders can be given to elements to emphasize and highlight them.
Design and aesthetics: Borders allow to add you to add decoration to the elements to enhance the visual appeal. This can be achieved using the style, color and width of border.

Borders - Properties

Following table describes the various properties of border, their description and default values they hold:

Property	Description	Default value
style	specifies whether a border should be solid, dashed line, double line, or one of the other possible values	none
width	specifies the width of a border	medium
color	specifies the color of a border	foreground color of the element and if element is blank, then color of the parent element

Now, we will see how to use these properties with examples.

CSS Borders - border-style Property

The border-style property is one of the essential properties of border. Following values can be passed to border-style:

Value	Description
none	No border
hidden	A hidden border, same as 'none' except for table elements
dotted	A series of dots
dashes	A series of short dashes
solid	A single solid line
double	Two parallel lines with a small gap between them
groove	A border that appears to be carved into the page
ridge	A border that appears to be slightly raised above the page
inset	A border that appears embedded into the page
outset	A border that appears slightly raised out of the page
initial	Sets the border-style property to its default value
inherit	Inherits the border-style property from its parent element

Let us see an example for these values of border-style:

<html>
<head>
<style>
      p.none {border-style: none;}
      p.hidden {border-style: hidden;}
      p.dotted {border-style: dotted;}
      p.dashes {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.mixed {border-style: none dashed solid dotted;}
</style>
</head>
<body>
   <h2>border-style Property</h2>
      <p class="none">No border.</p>
      <p class="hidden">Hidden border.</p>
      <p class="dotted">Dotted border.</p>
      <p class="dashes">Dashed border.</p>
      <p class="solid">Solid border.</p>
      <p class="double">Double border.</p>
      <p class="groove">Groove border.</p>
      <p class="ridge">Ridge border.</p>
      <p class="inset">Inset border.</p>
      <p class="outset">Outset border.</p>
      <p class="mixed">A mixed border.</p>
</body>
<html>

Single Side - Border Style

The property border-style can be exclusively specified for each single-side. The same set of values can be passed to each single-side for border-style:

Let us see an example:

<html>
<head>
<style>
   p {border-top-style: dotted; border-right-style: solid; border-bottom-style: dashed; border-left-style: double;
      padding: 2em;}
</style>
</head>
<body>
   <h2>border-style (single-side)</h2>
      <p>Different border styles on all sides.</p>
</body>
<html>

CSS BorderS - width Property

The border-width property is next in line after setting border style. Following values can be passed to border-width:

Value	Description
thin	a thin border
medium	a medium width border
thick	a thick border
length	any length specified (like 0.1em, 5px)

Declare a border-style before declaring border-width, else the border effect will not be seen.

Let us see an example (with and without specifying border-style):

<html>
  <head>
   <style>
      p.thin {border-width: thin;}
      p.medium {border-width: medium;}
      p.thick {border-width: thick;}
      p.length {border-width: 100px;}
      p.thin1 {border-style: double; border-width: thin;}
      p.medium1 {border-style: dashed; border-width: medium;}
      p.thick1 {border-style: solid; border-width: thick;}
      p.length1 {border-style: dotted; border-width: 10px;}
   </style>
  </head>
  <body>
      <h2>border-width without <i>border-style</i> property</h2>
      <p class="thin">Thin border.</p>
      <p class="medium">Medium border.</p>
      <p class="thick">Thick border.</p>
      <p class="length">Specific length border.</p>
      <h2>border-width with <i>border-style</i> property</h2>
      <p class="thin1">Thin width.</p>
      <p class="medium1">Medium width.</p>
      <p class="thick1">Thick width.</p>
      <p class="length1">Specific length width border.</p>
  </body>
</html>

Single Side - Border Width

The property border-width can be exclusively specified for each single-side. The same set of values can be passed to each single-side for border-width:

border-top-width
border-right-width
border-bottom-width
border-left-width

Let us see an example:

<html>
<head>
<style>
   p {border-style: solid;
      border-top-width: thin;
      border-right-width: thick;
      border-bottom-width: medium;
      border-left-width: 10px;
      padding: 2em;}
</style>
</head>
<body>
   <h2>border-width (single-side)</h2>
      <p>Different border widths on all sides.</p>
</body>
</html>

CSS Borders - color Property

The border-color is the third constituent property of border. It sets the color of the border.

border can have one, two, three or all four values.
If no color is specified for border, the default value is currentcolor i.e. the foreground color.
Any type of color value can be passed, such as RGB, RGBA, hexadecimal, etc.

Following values can be passed to border:

Value	Description
color	the border will be of the color specified
transparent	the border will be transparent
inherit	the parent element's value is inherited

Declare a border-style before declaring border-color, else the border effect will not be seen.

Let us see an example (with and without specifying border-style):

<html>
<head>
<style>
   p.color1 {border-color: red;}
   p.hexa1 {border-color: #00ff00;}
   p.color2 {border-style: dashed; border-color: red;}
   p.hexa2 {border-style: solid; border-color: #00ff00;}
</style>
</head>
<body>
   <h2>border-color without <i>border-style</i> property</h2>
   <p class="color1">Red color with name.</p>
   <p class="hexa1">Green color with hexadecimal.</p>
   <h2>border-color with <i>border-style</i> property</h2>
   <p class="color2">Red color with name.</p>
   <p class="hexa2">Green color with hexadecimal.</p>
</body>
</html>

Single Side - Border Color

The property border-color can be exclusively specified for each single-side. The same set of values can be passed to each single-side for border-color:

Let us see an example:

<html>
<head>
<style>
   p {border-style: solid;
      border-top-color: red;
      border-right-color: #0000ff;
      border-bottom-color: rgb(100,123,111);
      border-left-color: rgba(50,123,111,0.4);
      padding: 0.5in;}
</style>
</head>
<body>
   <h2>Different border color on all sides</h2>
   <p>Check the border colors!!!</p>
</body>
</html>

CSS Borders - Single-Side Shorthand Properties

In case you want to apply all the border properties, such as style, width and color, along just one side of an element, you can make use of the shorthand border properties.

For example, if the border properties are to be applied to top side of an h2 element, you can use the following syntax:

   h2 {border-top: thin solid red;}

Four shorthand properties, based on each side of any element, are as follows:

Let us see an example:

<html>
   <head>
      <style>
         p {border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin double rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px solid;
            padding: 2cm;}
      </style>
   </head>
   <body>
         <h2>Shorthand single-side border properties</h2>
         <p>Check the borders!!!</p>
   </body>
</html>

CSS Borders - Global - Shorthand Property

The smallest possible shorthand property for border on all sides of an element is border.

Syntax

   h2 {border: thick dotted green;}

The above code will add a green, dotted and thick border on all the four sides of h2 element.

Let us see an example:

<html>
<head>
<style>
   p {border: green dashed thick;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>Shorthand border property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

But you still have the option of overriding the border shorthand property with any individual property passed exclusively. See the following sample code to clarify this point:

   h2 {border: thin solid gray;}
   h2 {border-bottom-width: 15px;}

The above code will have a thin, solid and gray border on all the sides except for the bottom where the width will be of 15px.

Let us see an example:

<html>
<head>
<style>
   p {border: #0000ff dashed thick;
      border-bottom-width: 15px;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>Shorthand border property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS Borders - Borders and Inline Elements

Borders can be given to any inline element in the same manner. The border's thickness will not have any effect on the line height of element. If left and right borders are specified in an inline element, it will displace the text around the border.

Syntax

strong {border-top: thin solid green; border-bottom: 5px dotted #ff00ff;}

Above code will apply the border to strong text in the paragraph as green, thin and solid border on the top and magenta-colored, 5px dotted border on the bottom side.

Let us see an example:

<html>
<head>
<style>
   strong {border-top: thick solid green;
   border-bottom: 5px dashed #ff00ff;
   background-color: silver;}
</style>
</head>
<body>
   <div>
      <p>Check the <strong>inline elements with borders</strong> and rest has no border.</p>
   </div>
</body>
</html>

CSS Borders - Replaced Elements

In case of replaced elements, such as an image, the line height will get affected by applying border.

Syntax

   img {border: 2em solid #ff00ff;}

Above code will apply a solid, magenta-colored, 2em wide border around the image.

Let us see an example:

<html>
<head>
<style>
   img {border: 1em solid #ff00ff;}
</style>
</head>
<body>
   <div>
      <p>Check the logo <img src="images/logo.png" alt="logo image"> with borders altering the line height.</p>
   </div>
</body>
</html>

CSS Borders - Images

Just to make the border more complicated and interesting, an image can be added as a border to an element. In order to do that you need to provide a source for your image using the property border-image-source.

Points to remember:

Declare the border-style before providing an image source, else no image will be displayed as the border.
If no border-width is specified, then it will default to medium, which is approximately, 3px.

border-image-source

This property specifies the source of an image to be passed as a border to an element.

Syntax

   border: 10px solid; border-image-source: url('URL');

border-image-slice

The image specified using the property border-image-source can be sliced using the property border-image-slice.

As the name suggests, this property is used to slice up an image. It divides the image in 9 regions, with 4 corners, 4 edges and a middle region.

The following diagram demonstrates function of border-image-slice property:

Note: Offset for border-image-slice can be provided in terms of percentage and length units. But, percentages are highly recommended.

Refer the following syntax for example:

   border: 20px solid;
   border-image-source: url('URL');
   border-image-slice: 25%;

border-image-width

To specify the width of the image to be set as a border, you can use the property border-image-width.

Syntax

   border: 20px solid;
   border-image-source: url('URL');
   border-image-width: 15px;
   border-image-slice: 33.33%;

border-image-outset

In order to avoid the overlapping of the image borders and the content, you can use the property border-image-outset.

This property pushes the border image outside, beyond the border box.

Syntax

   border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-width: 1;
   border-image-slice: 10;
   border-image-outset: 8px;

border-image-repeat

By default the border image gets stretched along the sides, but this can be changed, using the property border-image-repeat.

This property repeats the image specified along the sides of the border, until the whole length and width is not filled.

Syntax

   border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-repeat: repeat;

It can also take the value as round, apart from stretch and repeat.

CSS Border Image - Shorthand

For brevity purpose, there is a shorthand for setting up of border image, i.e., border-image. The values passed to shorthand border-image are separated using the solidus symbol (/). The values should be listed in a specific order, which is slice, then width and last is offset.

Syntax

   border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;

Note: You can also declare the property border-image with just one value i.e., URL and rest of the values will be default.

Let us see an example:

<html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      border: 20px solid;
      border-image: url(images/border.png) 30 round;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS Borders - Related Properties

All the properties related to border are listed in the table below:

Property	Description
border	A shorthand property for setting all the border properties in one declaration
border-bottom	A shorthand property for setting bottom border of an element.
border-bottom-color	Sets the color of bottom border of an element.
border-bottom-width	Sets the width of bottom border of an element.
border-bottom-style	Sets the style of bottom border of an element.
border-color	A shorthand property for setting border color of an element.
border-left	A shorthand property for setting left border of an element.
border-left-color	Sets the color of left border of an element.
border-left-width	Sets the width of left border of an element.
border-left-style	Sets the style of left border of an element.
border-right	A shorthand property for setting right border of an element.
border-right-color	Sets the color of right border of an element.
border-right-width	Sets the width of right border of an element.
border-right-style	Sets the style of right border of an element.
border-style	A shorthand property for setting style of border of an element
border-top	A shorthand property for setting top border of an element.
border-top-color	Sets the color of top border of an element.
border-top-width	Sets the width of top border of an element.
border-top-style	Sets the style of top border of an element.
border-width	A shorthand property for setting border width of an element.
border-image	A shorthand property for setting border image.
border-image-outset	Sets the image outset i.e how much the border image area extends beyond the border box.
border-image-repeat	This property determines whether the border image should be repeated, rounded, spaced or stretched.
border-image-source	Sets the source/path of an image to be passed as a border to an element.
border-image-slice	This property shows how to slice up an image in a border.
border-image-width	Sets the width of the image to be set as a border.

Print Page