Style attribute out of sync when changing between a css shorthand and specific property like border to border-left

**I'm submitting a bug report**

* **Library Version:**
1.6.0

**Please tell us about your environment:**
* **Operating System:**
OSX 10.13.4

* **Node Version:**
8.9.1

* **NPM Version:**
4.6.1

* **JSPM OR Webpack AND Version**
JSPM 0.16.53

* **Browser:**
Chrome 66.0.3359.139 | FF 59.0.2 | all?

* **Language:**
all

**Current behavior:**
When toggling between a css shorthand property and a specific property like `border` and `border-left` in a css/style attribute, the styles get out of sync / don't get applied.

Example gistrun:
https://gist.run/?id=b6dac1c04a230db45afc8825f499edf5

Problem code:
https://github.com/aurelia/binding/blob/master/src/element-observation.js#L124
`style.removeProperty('border')` will also remove related properties like `'border-left'`
also, `style.removeProperty('border-width')` will also remove `'border-left-width'`, etc.

Simplest Example:
```html

**Expected/desired behavior:**

Actual element styles should always stay in sync with aurelia css/style bindings (while maintaining compatability with other frameworks that mutate styles)

* **What is the motivation / use case for changing the behavior?**

When this happens, it is incredibly mysterious at first, and hard to track down :D

Start in src/element-observation.js at the referenced line and reproduce the shorthand-to-specific-property transition from the linked gist. Trace how style.removeProperty affects related CSS properties, then verify that Aurelia css/style bindings remain synchronized when switching between border and border-left while preserving compatibility with external style mutations.

Written by the indexing model from the issue text.