We're really bad at rounded corners 馃槄 : Revision of rounded corners of MR Widget area
Our merge request widget makes nice use of rounded corners, but we have not taken care to look at the finer details when implementing this because rendering issues keep cropping up, and even when they are fixed they are often broken again when changes are made.
I think we should audit the way we're handling rounded corners (specifically in our MR widget CSS, but there are other areas with similar mistakes) with the following in mind:
-
Elements which are children of parents with rounded corners should have rounded corners themselves (especially if they have a background color applied)
-
Children with rounded corners should make sure to use the correct radius (should be
parent-radius - parent-border-size
), otherwise it can look ugly on close inspection: -
Make use of
> :first-child
and> :last-child
to ensure child elements of parents with rounded corners have rounded corners themselves. This is a case where utility classes will fail us. We have many sections of our MR widget that will expand or collapse with user interaction and if we're relying on utility classes, we'll need to conditionally apply them based on the state of the UI. Best to let native CSS features handle this for us. -
Applying a border-radius when there is only a border on one side of an element will have an ugly, tapered-off look. Let's avoid this.