Selected Reading
Q&A

CSS - Borders

The border of an HTML element is simply one or more lines that surround the content and padding of an element. Every border has three aspects: its width, or thickness; its style, or appearance; and its color.

CSS Borders

The CSS border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change −

border-style - Specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
border-color - Specifies the color of a border. The default value is the foreground color of the element and if element is blank, then color of the parent element
border-width - Specifies the width of a border. The default value is medium.

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

CSS Border Style

The border-style property specifies what kind of border to display. 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

The border-style property can have upto four values in one statement where we can specify the border style for top, right, bottom and left border.

Example

The following example to show border-style properly with different values −

<html>
<body>
   <p style="border-style: none;">No border.</p>
   <p style="border-style: hidden;">Hidden border.</p>
   <p style="border-style: dotted;">Dotted border.</p>
   <p style="border-style: dashed;">Dashed border.</p>
   <p style="border-style: solid;">Solid border.</p>
   <p style="border-style: double;">Double border.</p>
   <p style="border-style: groove;">Groove border.</p>
   <p style="border-style: ridge;">Ridge border.</p>
   <p style="border-style: inset;">Inset border.</p>
   <p style="border-style: outset;">Outset border.</p>
   <p style="border-style: none dashed solid dotted;">A mixed border.</p>
</body>
<html>

CSS Border Style - Single Side

CSS provided following four properties to control the style of each single-side of an element.

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

Example

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;
      border-width:5px; padding: 2em;
   }
</style>
</head>
<body>
   <h2>border-style (single-side)</h2>
   <p>Different border styles on all the sides.</p>
</body>
<html>

CSS Border Width

The border-width property is next in line after setting border style and this property is used to set the border width. 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 in px, pt, cm, em, etc

The border-width property can have upto four values in one statement where we can specify the border width for top, right, bottom and left border.

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

Example

Let us see an example:

<html>
<body>
   <h2>border-width with different values</h2>
   <p style="border-style: double; border-width: thin;">Thin width.</p>
   <p style="border-style: dashed; border-width: medium;">Medium width.</p>
   <p style="border-style: solid; border-width: thick;">Thick width.</p>
   <p style="border-style: dotted; border-width: 5px">Specific length width border.</p>
   <p style="border-style: solid; border-width: 2px 4px 5px 10px">Mixed length width border.</p>
</body>
</html>

CSS Border Width - Single Side

The property border-width can be set independently 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

Example

Let us see an example:

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

CSS Border Color

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

border-color property can have one, two, three or all four values.
If you don’t declare a color, the default color is the foreground color of the element.
Any type of color value can be passed, such as Name, RGB, RGBA, Hexadecimal, etc.

Following values can be passed to border-color:

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

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

The border-color property can have upto four values in one statement where we can specify the border color for top, right, bottom and left border.

Example

Let us see an example of border-color:

<html>
<body>
   <h2>border-color with different values</h2>
   <p style="border-style: double; border-color: red;">Red Color Border.</p>
   <p style="border-style: dashed; border-color: #40a944;">Green Color Border</p>
   <p style="border-style: solid; border-color: rgb(255,200,0);">Yellow Color Border</p>
   <p style="border-style: dotted; border-color: hsl(0, 50%, 50%)">Brown Color Border</p>
   <p style="border-style: solid; border-color: red blue green yellow">Mixed Color Borders</p>
</body>
</html>

CSS Border Color - Single Side

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

border-top-color
border-right-color
border-bottom-color
border-left-color

Example

Let us see an example:

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

CSS Border - 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 border shorthand 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:

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

Example

Let us see an example:

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

CSS Border - Global Shorthand Property

The smallest possible shorthand property for border for 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.

Example

Let us see an example:

<html>
<head>
<style>
   p {
      border: green dashed thick; padding: 10px;
   }
</style>
</head>
<body>
   <h2>Border Shorthand 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: #40a944 dashed thick; border-bottom-width: 15px; padding: 10px;
   }
</style>
</head>
<body>
   <h2>Border Shorthand Property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS Rounded Borders

We can use border-radius property to add rounded borders to an element.

Syntax

   p {
      border: 2px solid #40a944; border-radius: 5px;
   }

The above code will add a rounded border around paragraph element.

Example

<html>
<head>
<style>
   p {
      border: 2px solid #40a944; border-radius: 5px; padding:10px;
   }
</style>
</head>
<body>
   <h2>Round Borders</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS Borders - Inline Elements

Borders can be given to any inline HTML element. 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.

Example

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>
      <h2>CSS Borders on Inline Elements</h2>
      <p>Check the <strong>inline elements with borders</strong> and rest has no border.</p>
   </div>
</body>
</html>

CSS Borders - Replaced Elements

We can apply border around replaced elements such as an image but the line height will get affected by applying border on such elements.

Syntax

   img {
      border: 2em solid #40a944;
   }

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

Example

Let us see an example:

<html>
<head>
<style>
   img {
      border: 1em solid #40a944;
   }
</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>