Bottom Right Border Radius on a source button

How would I apply a bottom right border radius to a source button? I tried a . source-button to address it, even with !important, but that didn’t do the trick. I’m not yet into the utility classes (waiting for that in the Workbook), … thought it’s simple, but maybe it isn’t… ;)

You are sort of on the right track, but remember that spaces are important.

If you use:
.source-button {border-bottom-right-radius: 99px}
That will add a 99px bottom right border to all buttons.

To target just the button you want to modify, add a class (or a label) to the button you want to modify. - e.g. bordButt. This will act as a label for the button you want to modify.

Then use:
`.bordButt .source-button {
border-bottom-right-radius: 99px;
}

This will modify all buttons that have the class bordButt. Note the single space between .bordButt and .source-button

Thanks Gary. The space after the dot was my mistake, I had it right in RW, but it still does not work. I have no idea why. I’m currently in the process of copying layouts I like, just to get more used to work with Source. Adding the css to the class in the inspected code, works. However, not when I just add it the way I’m trying.

Update: The !important wasn’t working before either. I now restarted RW, checked again, and now it works. Doh! Thanks for chiming in though.

So the code needed is .source-button {border-bottom-right-radius: 25px !important;}

1 Like