Border Radius

A comprehensive reference for setting element corner shapes, curvature scales, and directional rounding modifiers. This framework includes global presets, directional edge-grouping shortcuts, individual corner metrics, and functional custom value generators.

---

Radius Size Scales Reference

Static utility presets map layout values cleanly across a uniform curve step definition. the prefix for style is rounded_

Scale Suffix	Corner Radius Value	Design Intent Context
_none	0	Sharp absolute edges
_xs	2	Micro adjustments / Crisp tags
_sm	4	Small interactive nodes / Buttons
_md | _lg	8	Standard card layouts / Common wrappers
_xl	12	Prominent UI panels
_2xl	16	Main layout sections / Dialog modals
_3xl	24	Distinctive heavy visual surfaces
_4xl	32	Large custom dashboard content banners
_full	1000	Perfect stadium buttons or circular profiles

---

Static Preset Rule Definitions (rncStyles)

These pre-compiled static dictionaries target explicit groupings or distinct individual corners.

Target Layout Region	Prefix Code	Under-the-Hood Native Properties Map
Global (All 4 Corners)	rncStyles.rounded_[scale]	borderRadius
Start Sides (Left corners)	rncStyles.rounded_s_[scale]	borderTopLeftRadius, borderBottomLeftRadius
End Sides (Right corners)	rncStyles.rounded_e_[scale]	borderTopRightRadius, borderBottomRightRadius
Top Group (Top corners)	rncStyles.rounded_t_[scale]	borderTopLeftRadius, borderTopRightRadius
Bottom Group (Bottom corners)	rncStyles.rounded_b_[scale]	borderBottomLeftRadius, borderBottomRightRadius
Top Left Corner	rncStyles.rounded_tl_[scale]	borderTopLeftRadius
Top Right Corner	rncStyles.rounded_tr_[scale]	borderTopRightRadius
Bottom Left Corner	rncStyles.rounded_bl_[scale]	borderBottomLeftRadius
Bottom Right Corner	rncStyles.rounded_br_[scale]	borderBottomRightRadius

---

Dynamic Curve Generators (rncStyles)

Invoke functional overrides when your UI layout requires unique radius sizing parameters outside the standard static scale index.

Function Interface	Native Property Targets
rncStyles.rounded(radius: number)	borderRadius
rncStyles.rounded_s(radius: number)	borderTopLeftRadius, borderBottomLeftRadius
rncStyles.rounded_e(radius: number)	borderTopRightRadius, borderBottomRightRadius
rncStyles.rounded_t(radius: number)	borderTopLeftRadius, borderTopRightRadius
rncStyles.rounded_b(radius: number)	borderBottomLeftRadius, borderBottomRightRadius
rncStyles.rounded_tl(radius: number)	borderTopLeftRadius
rncStyles.rounded_tr(radius: number)	borderTopRightRadius
rncStyles.rounded_bl(radius: number)	borderBottomLeftRadius
rncStyles.rounded_br(radius: number)	borderBottomRightRadius

---

Usage Example

BorderRadiusPreview.tsx

import React from 'react';
import { View, Text, Image } from 'react-native';
import rncStyles from 'rncstyles';

export default function BorderRadiusPreview() {
  return (
    <View style={{ gap: 20, padding: 16 }}>
      
      {/* Uniform Medium Rounded Card Element */}
      <View style={[rncStyles.rounded_md, { backgroundColor: '#f4f4f5', padding: 16 }]}>
        <Text>Standard Card with 8px uniform rounding</Text>
      </View>

      {/* Top Banner with Rounded Top Corners Only */}
      <View style={[rncStyles.rounded_t_2xl, { backgroundColor: '#3b82f6', height: 100 }]}>
        <Text>Top Rounded Card Element Header</Text>
      </View>

      {/* Perfect Circular Profile Picture Avatar */}
      <Image 
        source={{ uri: '[https://placeholder.com/user.png](https://placeholder.com/user.png)' }}
        style={[rncStyles.rounded_full, { width: 64, height: 64 }]} 
      />

      {/* Segmented Tab Button - Rounded Left Side Only */}
      <View style={[rncStyles.rounded_s_xl, { backgroundColor: '#e4e4e7', padding: 12, width: 120 }]}>
        <Text>Left Option Tab</Text>
      </View>

      {/* Element Utilizing Exact Functional Target Intersections */}
      <View style={[rncStyles.rounded_tl(40), rncStyles.rounded_br(20), { backgroundColor: '#10b981', padding: 16 }]}>
        <Text>Asymmetric Corner Framing Container</Text>
      </View>

    </View>
  );
}