5.1 Curve Radii: the ‘border-radius’ properties

Chapter 5 - Rounded Corners - 5.1 Curve Radii: the ‘border-radius’ properties

Go to the relevant page of the specification.

border-bottom-left-radius-001
Borders. Border-bottom-left-radius using 0 value
To verify the border-bottom-left-radius property, when set with 0, works as expected
border-bottom-left-radius-002
Borders. Border-bottom-left-radius using one length value: 25px
To verify if border-bottom-left-radius property set to one length value, works as expected
border-bottom-left-radius-003
Borders. Border-bottom-left-radius using two length values: 40px 20px
To verify border-bottom-left-radius property set to two length values, works as expected
border-bottom-left-radius-004
Borders. Border-bottom-left-radius using one percentage value: 20%
To verify border-bottom-left-radius property set to percentage value, works as expected
border-bottom-left-radius-005
Borders. Border-bottom-left-radius using two percentage values: 20% 30%
To verify border-bottom-left-radius property set to two precentage value, works as expected
border-bottom-left-radius-006
Borders. Border-bottom-left-radius using two values: 40px 30%
To verify border-bottom-left-radius property set to two values in different unit, works fine
border-bottom-left-radius-007
Borders. Border-bottom-left-radius using two values: 20% 25px
To verify border-bottom-left-radius property set to two values in different unit, works fine
border-bottom-left-radius-008
Borders. Border-bottom-left-radius using two values: 4em 30%
To verify border-bottom-left-radius property set to two values in different units, works fine
border-bottom-left-radius-009
Borders. Border-bottom-left-radius using "inherit"
To verify if inherit feature works, when assigned to border-bottom-left-radius
border-bottom-left-radius-010
Borders. Border-bottom-left-radius using one length value: 25px 0
To verify border-bottom-left-radius property set to one length value, works fine
border-bottom-left-radius-011
Borders. Border-bottom-left-radius using one length value: 0 3em
To verify border-bottom-left-radius property set to one length value, works fine
border-bottom-left-radius-012
Borders. Border-bottom-left-radius using two length values: 0.5in 10mm
To verify border-bottom-left-radius property set to two length values (with diferent units), works as expected
border-bottom-left-radius-013
Borders. Border-bottom-left-radius using two length values: 40pt 2pc
To verify border-bottom-left-radius property set to two length values (with different units), works as expected
border-bottom-left-radius-014
Borders. Border-bottom-left-radius using two length values: 50px -25px
To verify if one length value is negative in border-bottom-left-radius, then the corner is not rounded.
border-bottom-right-radius-001
Borders. Border-bottom-right-radius using 0 value
To verify border-bottom-right-radius property, when set with 0, works as expected
border-bottom-right-radius-002
Borders. Border-bottom-right-radius using one length value: 25px
To verify border-bottom-right-radius property set with one length value, works as expected
border-bottom-right-radius-003
Borders. Border-bottom-right-radius using two length values: 40px 20px
To verify border-bottom-right-radius property set with two length values, works as expected
border-bottom-right-radius-004
Borders. Border-bottom-right-radius using one percentage value: 20%
To verify border-bottom-right-radius property set with one percentage value, works as expected
border-bottom-right-radius-005
Borders. Border-bottom-right-radius using two percentage value: 20% 30%
To verify border-bottom-right-radius property set with two percentage value works as expected
border-bottom-right-radius-006
Borders. Border-bottom-right-radius using two value: 40px 30%
To verify border-bottom-right-radius property set to two value with different unit, works as expected
border-bottom-right-radius-007
Borders. Border-bottom-right-radius using two value: 20% 25px
To verify border-bottom-right-radius property set to two value with different unit, works as expected
border-bottom-right-radius-008
Borders. Border-bottom-right-radius using two values: 4em 30%
To verify border-bottom-right-radius property set to two values with different units, works as expected
border-bottom-right-radius-009
Borders. Border-bottom-right-radius using "inherit"
To verify if inherit feature works, when assigned to "borderbottomrightradius" property
border-bottom-right-radius-010
Borders. Border-bottom-right-radius using one length value: 25px 0
To verify border-bottom-right-radius property set with one length value, works as expected
border-bottom-right-radius-011
Borders. Border-bottom-right-radius using one length value: 0 3em
To verify border-bottom-right-radius property set with one length value, works as expected
border-bottom-right-radius-012
Borders. Border-bottom-right-radius using two length values: 0.5in 10mm
To verify border-bottom-right-radius property set with two values (with different units), works as expected
border-bottom-right-radius-013
Borders. Border-bottom-right-radius using two length values: 40pt 2pc
To verify border-bottom-right-radius property set with two values (with different units), works fine
border-bottom-right-radius-014
Borders. Border-bottom-right-radius using two length values: 50px -25px
To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded.
border-radius-001
Borders. border
To verify when border-radius property, when set to zero, works as expected.
border-radius-002
Borders. border
To verify border-radius property set with one length value, works as expected
border-radius-003
Borders. border
To verify border-radius property set with one length value along with a zero, works as expected
border-radius-004
Borders. border
To verify border-radius property set with value using slash, works as expected
border-radius-005
Borders. border
To verify border-radius property set with value using slash, works as expected
border-radius-006
Borders. border
To verify border-radius property set with values using slash, works as expected
border-radius-007
Borders. border
To verify border-radius property set with values (in different units) using slash, works as expected
border-radius-008
Borders. border
To verify border-radius property set with excess values, works as expected
border-radius-009
Borders. border
To verify inherit feature works, when it is assigned to border-radius
border-radius-010
Borders. border
To verify inherit feature works, when it is assigned to border-radius
border-radius-011
Borders. border
If border-radius is zero, all corners are square.
border-radius-horizontal-value-is-zero
border-radius property if horizontal value is zero
If the horizontal radius length is zero, the corner is square, not rounded.
border-radius-shorthand-002
Borders Radius Shorthand.
The shorthand border radius property can be used to specify all four eliptical corners of a box.
border-top-left-radius-001
Borders. Border-top-left-radius using 0 value
To verify if the border-top-left-radius property, when set with 0, works as expected.
border-top-left-radius-002
Borders. Border-top-left-radius using one length value: 25px
To verify border-top-left-radius property set to one length value, works fine
border-top-left-radius-003
Borders. Border-top-left-radius using two length values: 40px 20px
To verify border-top-left-radius property set to two length values, works fine
border-top-left-radius-004
Borders. Border-top-left-radius using one percentage value: 20%
To verify border-top-left-radius property set to one percentage value, works fine
border-top-left-radius-005
Borders. Border-top-left-radius using two percentage values: 20% 30%
To verify border-top-left-radius property set to two percentage values, works fine
border-top-left-radius-006
Borders. Border-top-left-radius using two values: 40px 30%
To verify border-top-left-radius property set to two values with different units, works fine
border-top-left-radius-007
Borders. Border-top-left-radius using two values: 20% 25px
To verify border-top-left-radius property set to two values with different units, works fine
border-top-left-radius-008
Borders. Border-top-left-radius using two values: 4em 30%
To verify border-top-left-radius property set to two values with different units, works fine
border-top-left-radius-009
Borders. Border-top-left-radius using "inherit"
To verify inherit feature works, when it is assigned to border-top-left-radius.
border-top-left-radius-010
Borders. Border-top-left-radius using one length value: 25px 0
To verify if either length is 0, then the corner is not rounded.
border-top-left-radius-011
Borders. Border-top-left-radius using one length value: 0 3em
To verify if either length is 0, then the corner is not rounded.
border-top-left-radius-012
Borders. Border-top-left-radius using two length values: 0.5in 10mm
To verify border-top-left-radius property set to two length values (with different units), works fine
border-top-left-radius-013
Borders. Border-top-left-radius using two length values: 40pt 2pc
To verify border-top-left-radius property set to two length values (with different units), works fine
border-top-left-radius-014
Borders. Border-top-left-radius using two length values: 50px -25px
To verify if one length value is negative in border-top-left-radius, then the corner is not rounded.
border-top-right-radius-001
Borders. Border-top-right-radius using 0 value
To verify if the border-top-right-radius property, when set with 0, works as expected
border-top-right-radius-002
Borders. Border-top-right-radius using one length value: 25px
To verify border-top-right-radius property set to one length value, works fine
border-top-right-radius-003
Borders. Border-top-right-radius using two length values: 40px 20px
To verify border-top-right-radius property set to two length values, works fine
border-top-right-radius-004
Borders. Border-top-right-radius using one percentage value: 20%
To verify border-top-right-radius property set to one percentage value, works fine
border-top-right-radius-005
Borders. Border-top-right-radius using two percentage values: 20% 30%
To verify border-top-right-radius property set to two percentage values, works fine
border-top-right-radius-006
Borders. Border-top-right-radius using two values: 40px 30%
To verify border-top-right-radius property set to two values with different units, works fine
border-top-right-radius-007
Borders. Border-top-right-radius using two values: 20% 25px
To verify border-top-right-radius property set to two values with different units, works fine
border-top-right-radius-008
Borders. Border-top-right-radius using two values: 4em 30%
To verify border-top-right-radius property set to two values with different units, works fine
border-top-right-radius-009
Borders. Border-top-right-radius using "inherit"
To verify inherit feature works, when it is assigned to border-top-right-radius.
border-top-right-radius-010
Borders. Border-top-right-radius using one length value: 25px 0
To verify if either length is 0, then the corner is not rounded.
border-top-right-radius-011
Borders. Border-top-right-radius using one length value: 0 3em
To verify if either length is 0, then the corner is not rounded.
border-top-right-radius-012
Borders. Border-top-right-radius using two length values: 0.5in 10mm
To verify border-top-right-radius property sets to two length values (with different units), works fine
border-top-right-radius-013
Borders. Border-top-right-radius using two length values: 40pt 2pc
To verify border-top-right-radius property sets to two length values (with different units), works fine
border-top-right-radius-014
Borders. Border-top-right-radius using two length values: 50px -25px
To verify if one length value is negative for border-top-right-radius, then the element is not rounded.
css-border-radius-001
CSS border-radius Test
css-border-radius-002
CSS border-radius Test
if there is more then one graph and one color
css-box-shadow-001
CSS box-shadow Test
border-radius-applies-to-001
'Border-radius' applied to element with 'display' set to inline
When 'border-radius' is applied to an element with 'displaye: inline' it produces rounded corners.
border-radius-applies-to-002
'Border-radius' applied to element with a display of 'block'.
When 'border-radius' is applied to an element with 'displaye: block' it produces rounded corners.
border-radius-applies-to-003
'Border-radius' applied to element with 'display' set to list-item.
When 'border-radius' is applied to an element with 'displaye: list-item' it produces rounded corners.
border-radius-applies-to-004
'Border-radius' applied to element with 'display' set to run-in.
When 'border-radius' is applied to an element with 'displaye: run-in' it produces rounded corners.
border-radius-applies-to-005
'Border-radius' applied to element with 'display' set to inline-block.
When 'border-radius' is applied to an element with 'displaye: inline-block' it produces rounded corners.
border-radius-applies-to-006
'Border-radius' applied to element with 'display' set to 'table'.
When 'border-radius' is applied to an element with 'displaye: table' it produces rounded corners.
border-radius-applies-to-007
'Border-radius' applied to element with 'display' set to 'table-caption'.
When 'border-radius' is applied to an element with 'displaye: table-caption' it produces rounded corners.
border-radius-applies-to-008
'Border-radius' applied to element with 'display' set to 'table-cell'.
When 'border-radius' is applied to an element with 'displaye: table-cell' it produces rounded corners.
border-radius-applies-to-009
'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.
'Border-radius' should be ignored when in element with 'display' set to 'table-row' when 'border-collapse: collapse'.
border-radius-applies-to-010
'Border-radius' applied to element with a display of 'none'.
When 'border-radius' property is applied to elements with a display of 'none' then it continues to not have a layout.
border-radius-applies-to-011
'Border-radius' applied to element with a display of 'inline-table'.
When 'border-radius' is applied to an element with 'displaye: inline-table' it produces rounded corners.
border-radius-applies-to-012
'Border-radius' should be ignored in element with 'display' set to 'table-column' when 'border-collapse: collapse'.
'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column' when 'border-collapse: collapse'.
border-radius-applies-to-013
'Border-radius' should be ignored in element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.
'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-row-group' when 'border-collapse: collapse'.
border-radius-applies-to-014
'Border-radius' should be ignored in element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.
'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-header-group' when 'border-collapse: collapse'.
border-radius-applies-to-015
'Border-radius' should be ignored in element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.
'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-footer-group' when 'border-collapse: collapse'.
border-radius-applies-to-016
'Border-radius' should be ignored in element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.
'Border-radius' should not produce rounded corners when applied to an element with 'display' set to 'table-column-group' when 'border-collapse: collapse'.
border-radius-applies-to-017
'Border-radius' applied to element with 'display' set to 'inherit'.
When 'border-radius' is applied to an element with 'displaye: inherit' it produces rounded corners.
border-radius-clip-001
'Overflow' clips to the curve of the rounded corner.
'Overflow' clips to the curve of the rounded corner.
border-radius-clip-002
Background is clipped to the curve of the content-box when 'background-clip: content-box'
Background is clipped to the curve of the content-box when 'background-clip: content-box'
border-radius-content-edge-001
'Border-radius' set to 'img'
The content of replaced element 'img' is trimmed to the content edge curve of a rounded corner.
border-radius-different-width-001
Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.
When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides.
border-radius-initial-value-001
Initial value of 'border-radius' is 0
Initial value of 'border-radius' is 0.
border-radius-not-inherited-001
'Border-radius' is not inherited by default
'Border-radius' is not inherited by default.
border-radius-shorthand-001
'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties.
'Border-radius' shorthand sets all four 'border-[*]-radius' properties.
border-radius-sum-of-radii-001
Different variations on the sum of border-radius for adjacent corners
If the sum of any two adjacent corner radii exceeds the size of the border box, all the corner radii are reduced proportionally until none of them overlap.
border-radius-sum-of-radii-002
Different variations on the value of 'f'
When the value of 'f' is less than 1, then all corner radii are reduced by multiplying them with 'f'.
border-radius-with-three-values-001
'Border-radius' property with three values
If bottom-left radius is omitted in the 'border-radius' property then the bottom-left radius is the same as the top-right radius.
border-radius-with-two-values-001
'Border-radius' property with two values
If bottom-right radius is omitted in the 'border-radius' property then the bottom-right radius is the same as the top-left radius.
border-top-left-radius-values-004
Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.
Percentage for the horizontal radius of 'border-top-left-radius' refers to the width of the border box.
border-top-right-radius-values-004
Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
Percentage for the vertical radius of 'border-top-right-radius' refers to the height of the border box.
border-top-left-radius-values-001
'Border-top-left-radius' with two values.
The first value of the 'border-top-left-radius' is the horizontal radius of the rounded corner and the second value is its vertical radius.
border-top-left-radius-values-002
'Border-top-left-radius' with one value.
'Border-top-left-radius' with an omitted second value has the vertical radius of the rounded corner equal to its horizontal radius.
border-top-left-radius-values-003
'Border-top-left-radius' with one value as 0.
If either value of 'border-top-left-radius' is 0 then the corner is a square.