Border Radius

Can take 1-4 values, or can add a / and add another 1-4 values (number in px/em/rem or percentage)

Breakdown:

  • 1 value: will be the same for all 4 corners
  • 2 values: the first specifies top-left & bottom-right, the second is top-right & bottom-left
  • 3 values: first is top-left, second is top-right & bottom-left, third is bottom-right (so splits the first value in a 2-value pair into separate values)
  • 4 values: a number for each corner, in this order: top-left, top-right, bottom-right, bottom-left

Can add a / to get more values!

The values before the slash are for horizontal radius; values after the slash are vertical radius. Same value breakdown for both, but only focused on the horizontal or vertical side, depending.

border-radius: 50%;
/* or */
border-radius: 20px 20px 40px 40px / 2em 3em;

Text Decoration

Safari doesn’t support text-decoration-style within the text-decoration shorthand. Honestly, even though it feels like you should be able to use the shorthand for the shared property and write out the others - it’s best to just write them all out if you want them to look consistent.

The shorthand across the 3 big browsers should support:

  • text-decoration-line is underline / overline / line-through, or what type of line it is.
  • text-decoration-color is, well, the color of the line.

The other 2 properties are:

  • text-decoration-style is the solid / double / dotted / dashed / wavy values you can set for your decoration.
  • text-decoration-thickness lets you set a stroke value for how thick the line is.