WeasySuite - 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.