diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index b58c8e6a17e..653509fca70 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/packages/rn-tester/js/examples/Border/BorderExample.js
@@ -124,6 +124,12 @@ const styles = StyleSheet.create({
borderBottomRightRadius: 20,
borderColor: 'black',
},
+ border9Percentages: {
+ borderWidth: 10,
+ borderTopLeftRadius: '10%',
+ borderBottomRightRadius: '20%',
+ borderColor: 'black',
+ },
border10: {
borderWidth: 10,
backgroundColor: 'white',
@@ -132,6 +138,14 @@ const styles = StyleSheet.create({
borderColor: 'black',
elevation: 10,
},
+ border10Percentages: {
+ borderWidth: 10,
+ backgroundColor: 'white',
+ borderTopLeftRadius: '10%',
+ borderBottomRightRadius: '20%',
+ borderColor: 'black',
+ elevation: 10,
+ },
border11: {
width: 0,
height: 0,
@@ -343,6 +357,19 @@ export default ({
);
},
},
+ {
+ title: 'Corner Radii (Percentages)',
+ name: 'corner-radii',
+ description: 'borderTopLeftRadius & borderBottomRightRadius',
+ render: function (): React.Node {
+ return (
+
+ );
+ },
+ },
{
title: 'Corner Radii / Elevation',
name: 'corner-radii-elevation',
@@ -357,6 +384,20 @@ export default ({
);
},
},
+ {
+ title: 'Corner Radii / Elevation (Percentages)',
+ name: 'corner-radii-elevation',
+ description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
+ platform: 'android',
+ render: function (): React.Node {
+ return (
+
+ );
+ },
+ },
{
title: 'CSS Trick - Triangle',
name: 'css-trick-triangle',