Borders

Borders are one of my favorite tools in CSS, because they can serve many purposes at the same time:

Borders help visually organize sections.
They make interactive stand out.
They add personality to your page.
They can perform tricks too!

To design a border, just pick a thickness, style, and color, like so:


  border: 1px solid black;


  border: 2px dashed blue;


  border: 3px double red;


  border: 4px inset lightgray;


  border: 5px outset orange;


  border: 6px ridge cyan;


  border: 7px dotted green;

Borders often look better with rounded corners, which you can add with a separate setting:


  border-radius: 20px; 

  border: 3px dashed orange; 

  background: lightyellow; 

  padding: 10px;

Despite the name, the border-radius property doesn't actually need a border to work. You can use it with just a background color instead!


  border-radius: 20px; 

  background: gray; 

  color: white; 

  padding: 10px;

You can pick different colors for different sides of the border, or leave some sides open:


  border-left: 4px solid blue; 

  background: lightblue; 

  padding: 20px;


  border-top: 20px solid purple; 

  border-right: 20px solid transparent; 

  border-bottom: 20px solid pink;

Now, are you ready to see a silly trick?

Thick borders with differently-colored sides make diagonal lines at the corners.

The top and bottom colors can be set to transparent. If you remove all the text...

...You get triangles! (What do you think happens if you remove the bottom border entirely? Try it and see!)

I'm pretty sure borders were not originally intended to create triangles, but clever designers figured out how to do it. CSS is full of unexpected stuff like this, so I'll show you some more tricks later!

I'd also like to point out that the style attributes in the HTML are getting a little messy. It's okay when they're just changing one setting, but I think it's pretty hard to read when there are multiple settings in a single attribute. Fortunately, the next page will explain how to avoid that.

Check out the style element below to see how the border around this page was designed:

Before moving on, try experimenting by modifying the body's border or by adding borders to paragraphs!