In this section, we are going to look at the rules that define how the corners of components are rounded.
If you search for the word "corner" in theme.css
, you will find the /* Corner radius */
comment. Under this comment, you will see a set of four rules that can be used to set corners.
There is one rule that is common to all—.ui-corner-all
. The other rules specify how the top-left, top-right, bottom-left, and bottom-right corners should look.
The arrangement of rules in this way means that we can change each corner independently without having to change which rule the component or component part actually uses.
If you decide that the top-left corner should have no rounding at all, you can simply change the first rule, which initially looks like this:
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 4px;
}
The preceding rule can be changed to the following:
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border...