In step 41 of Learn the CSS Box Model by Building a Rothko Painting in beta RWD course, there is no mention for the syntax of border radius (/* top-left-and-bottom-right | top-right-and-bottom-left */
) in any of the previous steps.
Instructions of step 41
Use the
border-radius
property on the.two
selector, to set its top-left and bottom-right radii to8px
, and top-right and bottom-left radii to10px
.
But in the next step (step 42), in the instructions it is mentioned that border-radius accepts upto 4 values.
The
border-radius
property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.Round the top-left corner of
.three
by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
It’d be nice to be explicit and have an example like this
Here’s an example of a rule that sets the div of class .two
’s top-left and bottom-right radii to 4px
, and top-right and bottom-left radii to 8px
:
.two {
border-radius: 4px 8px;
}
If you think this is a valid idea, then I’ll raise an issue on GitHub.