Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support top, right, left, and bottom border variants

See original GitHub issue

Hi! First just wanted to thank you for this awesome package!

Would you be able to add support for the border-top, border-right, border-left, and border-bottom variants of border-style, border-width, border-color, and border-radius?

Currently only the borders theme key supports border-top, border-right, border-left, and border-bottom. After this change:

The borderWidths theme key would also apply to border-top-width, border-right-width, border-bottom-width, and border-left-width.
The borderStyles theme key would also apply border-top-style, border-right-style, border-bottom-style, and border-left-style.
The colors theme key would also apply to border-top-color, border-right-color, border-bottom-color, and border-left-color.
The radii theme key would also apply to border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, and border-top-left-radius.

I’d be happy to implement this change myself if you could give me some code pointers.

Issue Analytics

State:
Created 4 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

TomerAberbachcommented, Oct 23, 2019

I think I must have mistyped borderBottomWidth as borderWidthBottom and that’s why it didn’t work for me! I had myself convinced that the properties I mentioned must not be supported by the package because the page I linked does not list them in the table. But I’m glad to learn that they are supported!

Maybe I’ll write pull requests for the Theme UI Theme Specification and Styled System Theme Specification pages so that the tables remain in sync with the supported properties!

0reactions

jxnblkcommented, Jan 2, 2020

Closing this because I think the original issue has been resolved

Top Results From Across the Web

border-style - CSS: Cascading Style Sheets - MDN Web Docs

When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise). Each value is a...

CSS border-bottom-left-radius property - W3Schools

Property Values ; %, Defines the shape of the bottom-left corner in %, Demo ; initial, Sets this property to its default value....

[CSS-Level2-2009] Section 8.5.4, Border shorthand properties

The inherit value of the border-top, border-right, border-bottom, and border-left properties is not supported. V0048: The specification states:.

CSS: border-radius and -moz-border-radius - The Art of Web

border -top-left-radius, -moz-border-radius-topleft, -webkit-border-top-left-radius ... The latest versions of Safari now support -webkit-border-radius.

CSS border-style Property - W3docs

When three values are specified, the first style applies to the top, the second to the left and right, the third to the...