More granular border radius utilities

[emplums]

Is your feature request related to a problem? Please describe.
I've noticed in a lot of places that custom CSS is being used to apply border radius rules to specific sides of an element.
https://github.com/search?utf8=%E2%9C%93&q=border-top+repo%3AGitHub%2FGitHub+path%3Aapp%2Fassets%2Fstylesheets%2Fcustom%2F&type=Code&ref=advsearch&l=&l=

Describe the solution you'd like
More granular border radius utilities. Could folllow an API like so:

.border-tr-0 // border-top-right-radius: $border-radius-0
.border-br-1 // border-bottom-right-radius: $border-radius-1

or 

.btr-0 // border-top-right-radius: $border-radius-0
.bbr-1 // border-bottom-right-radius: $border-radius-1

Describe alternatives you've considered
Keeping the current API & continuing to add custom CSS for fine tuned border radius styles. Doesn't seem very maintainable though!

Additional context
I thought about this while reviewing this PR: https://github.com/github/github/pull/93040/files#diff-2fefdd5acad75a94deb15ce429d50e39L62 and realizing people are needing to create custom selectors just to apply/override border radius for specific corners

[pqt]

What about instead of .border-{c} using .rounded-{c}

.rounded-tr-0 // border-top-right-radius: $border-radius-0
.rounded-br-1 // border-bottom-right-radius: $border-radius-1

Since this already exists to some degree. https://styleguide.github.com/primer/utilities/borders/#rounded-corners

Generally speaking, 2px, 3px, 4px & 6px take care of most rounded corners cases, I however don't know what the internal policy is about adding upwards of twenty new selectors.

I also can't see the search results since I'm not GH Staff so I'm kind of taking a shot in the dark with this one based on practicality instead of knowing what the search results yield.

[shawnbot]

I think this is a great idea, since there are currently a lot of custom rules in github.com that we could kill off with at least edge-specific (rather than corner-specific) roundedness utilities. Something like the following might do it:

$edges: (
  top: (top-left, top-right),
  right: (top-right, bottom-right),
  bottom: (bottom-right, bottom-left),
  left: (bottom-left, top-left)
)

@each $edge, $corners in $edges {
  .rounded-#{$edge}-0 {
    @each $corner in $corners {
      border-#{$corner}-radius: 0;
    }
  }
  .rounded-#{$edge}-1 {
    @each $corner in $corners {
      border-#{$corner}-radius: $border-radius;
    }
  }
}

So you could either use class="rounded-1 rounded-bottom-0" or class="rounded-top-1". Or maybe we don't want to encourage the former and only provide the -1 and -2 edge variants? 🤔