Source: YouTube
Gypsy Avenger VS Obsidian Fury | Full Fight | Pacific Rim: Uprising | CLIP
CSS border-radius does not have an all keyword. To apply the same radius to all corners, use one value:
border-radius: 10px; /* all four corners */Shorthand value order
border-radius accepts 1 to 4 values before an optional /, and 1 to 4 values after it.
Order goes clockwise from top-left:
| Values | Meaning |
|---|---|
| 1 value | all 4 corners |
| 2 values | top-left & bottom-right / top-right & bottom-left |
| 3 values | top-left / top-right & bottom-left / bottom-right |
| 4 values | top-left / top-right / bottom-right / bottom-left |
Examples
1 value
border-radius: 10px;
/* all corners = 10px */2 values
border-radius: 10px 20px;
/* top-left & bottom-right = 10px */
/* top-right & bottom-left = 20px */3 values
border-radius: 10px 20px 30px;
/* top-left = 10px */
/* top-right & bottom-left = 20px */
/* bottom-right = 30px */4 values
border-radius: 10px 20px 30px 40px;
/* top-left = 10px */
/* top-right = 20px */
/* bottom-right = 30px */
/* bottom-left = 40px */More than 4 values?
Without /, 5 or more values are invalid:
border-radius: 1px 2px 3px 4px 5px; /* invalid */But you can use up to 8 values total with a slash:
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;This means:
- Before
/: horizontal radii - After
/: vertical radii
Example
border-radius: 10px / 20px;
/* every corner: horizontal radius 10px, vertical radius 20px */Valid value types
Each radius can be:
border-radius: 10px;
border-radius: 2em;
border-radius: 1rem;
border-radius: 50%;
border-radius: 0;Negative values are invalid:
border-radius: -10px; /* invalid */So the rule is:
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?;Meaning: 1–4 values before the slash, and optionally 1–4 values after the slash. More than 4 on either side is invalid.
Comments
Post a Comment