Skip to content

2015-06-05-css-border.md

Latest commit

 

History

History
102 lines (80 loc) · 2.73 KB

2015-06-05-css-border.md

File metadata and controls

102 lines (80 loc) · 2.73 KB
layout post
title CSS <strong>border</strong>
subtitle The <strong>edges</strong> of the rectangle
section css

Because an HTML element is rendered as a rectangle, it can have up to 4 borders: top, bottom, left and right. You can set a border on all sides at once, or on each side individually.

Border types and location

A CSS border has 3 properties:

  • border-color defined by using a color unit
  • border-style can be solid, dashed, dotted...
  • border-width defined by using a size unit

It also has 4 possible sides:

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

{% highlight css %} blockquote{ border-color: yellow; border-style: solid; border-width: 1px;} {% endhighlight %}

The shorthand property border allows to define all 3 properties at once:

{% highlight css %} blockquote{ border: 1px solid yellow;} {% endhighlight %}

Single border

If you want to set a border on only one of the four sides, you need to include the border's position in the CSS property. For example, for a bottom border, you can write:

{% highlight css %} blockquote{ border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px;} {% endhighlight %}

As for the border property, each side has its shorthand version:

{% highlight css %} blockquote{ border-bottom: 1px solid yellow;} {% endhighlight %}

What if I want 3 borders? Do I have to set them individually?

As you would have guessed, the quickest way to have 3 borders is to set all 4 of them and then remove the one you don't want:

{% highlight css %} blockquote{ border: 1px solid yellow; border-left: none;} {% endhighlight %}

Shorthand combinations

Because there exist 3 border properties and 4 border locations, there are 12 combinations possible:

border border-color border-style border-width
border-top border-top-color border-top-style border-top-width
border-bottom border-bottom-color border-bottom-style border-bottom-width
border-left border-left-color border-left-style border-left-width
border-right border-right-color border-right-style border-right-width

That's a lot of CSS properties available. You'll usually end up using the 5 shorthand versions only:

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