Styling widget borders independently

[zerline]

There is currently no possibility to set right/left/top/bottom borders separately.
Following in-person sprint discussion (cf #2641), and #920 discussion, we found best to deprecate border in favor of border_width, border_style and border_color, as these allow to give 4 values, one for each side.

[pbugnion]

This was discussed at the widget sprint. We decided to:

• remove or deprecate layout.border
• add layout.border_{width, style, color} traitlets that would take a valid CSS quadruple identifying each side, e.g. layout.border_width = "1px 2px 3px 4px", or layout.border_width = "1px".

An alternative interface would have been layout.border_{left, right, top, bottom} taking a string of type "1px solid red". This was decided against because it is less versatile: it doesn't allow for an obvious way to set things like border radius, or other CSS properties that don't easily split into sides.

Finally, other interfaces that involved resolving conflicts (e.g. allowing both border and border_width) were decided against since conflict resolution is hard.

[zerline]

This was discussed at the widget sprint. We decided to:

* remove or deprecate `layout.border`

* add `layout.border_{width, style, color}` traitlets that would take a valid CSS quadruple identifying each side, e.g. `layout.border_width = "1px 2px 3px 4px"`, or `layout.border_width = "1px"`.

An alternative interface would have been layout.border_{left, right, top, bottom} taking a string of type "1px solid red". This was decided against because it is less versatile: it doesn't allow for an obvious way to set things like border radius, or other CSS properties that don't easily split into sides.

Finally, other interfaces that involved resolving conflicts (e.g. allowing both border and border_width) were decided against since conflict resolution is hard.

Given that current ipywidgets CSS code (for ex in packages/controls/css/widgets-base.css) is based mainly on border and sometimes border-left etc .. (but never border-width etc ..), I have doubts about this design choice. Could we not implement border and border-left etc .., given that the most specific will have precedence?

Here are the rules:

1. inline css ( html style attribute ) overrides css rules in style tag and css file

2. a more specific selector takes precedence over a less specific one

3. rules that appear later in the code override earlier rules if both have the same specificity.

4. a css rule with !important always takes precedence.

[zerline]

See #2757