No way to specify "border{direction}: none"

[gfarrell]

Sometimes I find myself needing to remove a border (often on last-child elements), but the following produces invalid CSS:

borderRight none none none
-- gives "border-right: none none none;" which the browser (Firefox in this case) rejects

Valid CSS would be border-right: none but I don't see a way to achieve this with Clay.

[turion]

I see, good finding.

A local workaround for you could be:

key "border" none

Solutions in the library might be to change the type signature of border and similar functions like borderRight to:

border :: Maybe (Size LengthUnit, Stroke, Color) -> CSS

Or:

data Border = Border
  { borderSize :: Size LengthUnit
  , borderStroke :: Stroke
  , borderColor :: Color
  }

border :: Maybe Border -> CSS

PRs welcome :)

[chungyc]

I think the simplest thing to do is not use borderRight, but instead

borderRightStyle none

border-right: none may or may not be correct CSS. It's complicated.

What the standard says

The W3C draft says that border-right and friends are shorthands which set border-right-width, border-right-style, and border-right-color (and similarly for the other directions and the overall border). The values for border-right become values for these properties, while omitted values are set to their initial values. So border-right: none is supposed to become:

border-right-width: none
border-right-style: initial
border-right-color: initial

Strictly speaking, the W3C draft does not allow none to be a valid value for border-right-width. The style of the border is also set to the initial value, which may not necessarily be "no border". So a browser that is very strict with CSS is going to consider the width value to be erroneous and possibly ignore it, while possibly leaving the border style visible. You would be better off setting the border style to be none, which unambiguously means there is no border.

... but ...

Some browsers may interpret border-right: none in a way that seems reasonable, i.e., there is no right border. Firefox is mentioned as doing this. So border-right: none could be a reasonable thing to do for particular browsers. However, now one would have to consider if all browsers reasonably compliant with CSS standards have the same behavior, which seems a pain. So instead of trying to make borderRight none none none translate into border-right: none, it seems easier to use borderRightStyle none, which translates to border-right-style: none, to say that there is no border.