Feature request: add example for border radius

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 to 8px , and top-right and bottom-left radii to 10px .


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 :point_down:

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.

1 Like