css - CSS Border - CSS Border Color - CSS border property - HTML

Designing CSS Borders

You can apply borders to most HTML elements within the body. They provide a way to specify specific visual areas of text to separate it from the rest. Borders can also be applied to just about anything that you see on a web page including images, charts, and tables.

For this tutorial, you will learn some fun techniques to customize borders and see the results using different styles, widths, and colors. These techniques allow for creative design with truly unlimited capability for pure expression. 

This tutorial will take advantage of CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, we will provide you with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.

The Essentials of CSS Borders

Border-Styles

To create a border around an element, you will need to use a border-style. The following is a list of border-style values:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • Outset

Let’s dive right in with an HTML page with the CSS ready to go for all border styles listed above.

<!DOCTYPE html>
<html>
<head>
<style>
p.solid {border-style: solid;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
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;}
</style>
</head>

<body>

<h2>Border-Style Property</h2>

<p class="solid">A solid border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed 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>

</body>
</html>

The result in a browser will display all of the possibilities:

Border-Width

Think of border-width as the thickness of the border. Usually, the width of the border is set using a pixel value. There are also border properties that define each side of a square or rectangular box. 

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

Note: If you use border-width on its own, then the pixel value you set will effect all sides evenly. 

You will see the border set to 10 pixels (px) with a solid line in the following code sample.

<!DOCTYPE html>
<html>
<head>
<style>
p {border: 10px solid;}
</style>
</head>
<body>
<p>A border that is solid with 10 pixel width</p>
</body>
</html>

This code yields the following:

To showcase how you can modify each side of this border, let’s add in the following CSS code. 

Tip: Remember to always define the border style because if you do not do this, no border will appear even if you define all of the border widths. In the following code sample, if border: solid was not there, a border would not appear.

<!DOCTYPE html>
<html>
<head>
<style>
p {
   border: solid;
   border-top-width: 10px;
   border-right-width: 4px;
   border-bottom-width: 7px;
   border-left-width: 2px;
}
</style>
</head>
<body>

<p>A border with different widths</p>

</body>
</html>

This code yields the following:

Border-Color

Finally, border-color sets the color of the defined borders. Using the same code used previously for border-width, all you need to do is to add some color.

You could simply use border-color: red to define all sides being red.

Or you can define each side with different colors using border-top-color: red; etc. as shown below.

<!DOCTYPE html>
<html>
<head>
<style>

p {
   border: solid;
   border-top-width: 10px;
   border-top-color: red;
   border-right-width: 4px;
   border-right-color: blue;
   border-bottom-width: 7px;
   border-bottom-color: green;
   border-left-width: 2px;
   border-left-color: purple;
}
</style>
</head>
<body>

<p>A border with different widths and colors</p>

</body>
</html>

This will yield the following in your browser:

Borders Around Images

Don’t forget that you can use borders for a wide variety of purposes. For the final creative tutorial, let’s add a border around an image. Use img for the CSS to talk directly to the image being referred to. In this area, you can define all creative aspects of the border. 

<!DOCTYPE html>
<html>
<head>
<style>

img {
   border: solid;
   border-width: 5px;
   border-color: red;
}

</style>
</head>
<body>

<img src="wave2.jpg">

</body>
</html>

You end up with the ability to wrap your image with your defined border values.

Final Note

As you can see, the ability to control and design borders with styles, colors, and widths creates an environment with almost unlimited possibilities. Play with the code and see what works for you in the environment where you want to use borders. In the end, always ask yourself the question, what is the most pleasing to the eye? Be creative in your layouts and don’t be afraid to play. 

Where to Next?

Designing CSS Borders introduction should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS

Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.

HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!