diff --git a/src/__stories__/meter-story.tsx b/src/__stories__/meter-story.tsx
index 5ca2b2968..279636435 100644
--- a/src/__stories__/meter-story.tsx
+++ b/src/__stories__/meter-story.tsx
@@ -71,7 +71,6 @@ export const MeterStory: StoryComponent<MeterStoryArgs> = ({
     ...valuesArgs
 }) => {
     const values = Object.values(valuesArgs).slice(0, valuesCount);
-    console.log('values', values);
     return (
         <ResponsiveLayout variant={themeVariant}>
             <Box paddingY={24}>
@@ -82,7 +81,9 @@ export const MeterStory: StoryComponent<MeterStoryArgs> = ({
                     />
                 )}
 
-                <Meter type={type} reverse={reverse} values={values} />
+                <div style={{width: 'fit-content', border: '1px dotted red'}}>
+                    <Meter type={type} reverse={reverse} values={values} />
+                </div>
             </Box>
         </ResponsiveLayout>
     );
diff --git a/src/meter.tsx b/src/meter.tsx
index dd2ad36cc..219e2a09c 100644
--- a/src/meter.tsx
+++ b/src/meter.tsx
@@ -6,6 +6,7 @@ import {vars} from './skins/skin-contract.css';
 import bezier from 'cubic-bezier';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {useThemeVariant} from './theme-variant-context';
+import {useTheme} from './hooks';
 
 import type {DataAttributes} from './utils/types';
 
@@ -20,7 +21,7 @@ const ANIMATION_DELAY_MS = 200;
 const ANIMATION_DURATION_MS = 1000;
 const ANIMATION_EPSILON = 1000 / 60 / ANIMATION_DURATION_MS / 4;
 
-const SMALL_VALUE_THRESHOLD = Math.PI / 1000;
+const SMALL_VALUE_THRESHOLD = Math.PI / 10000;
 
 const TYPE_LINEAR = 'linear';
 const TYPE_ANGULAR = 'angular';
@@ -138,38 +139,49 @@ const MeterComponent = ({
     'aria-hidden': ariaHidden,
     dataAttributes,
 }: MeterProps): JSX.Element => {
-    const values = React.useMemo(() => valuesFromProps.map((v) => v / MAX_SEGMENT_VALUE), [valuesFromProps]);
+    const theme = useTheme();
+    const hasRoundLineCaps = theme.borderRadii.bar !== '0px';
     const themeVariant = useThemeVariant();
     const isOverMedia = themeVariant === 'media';
     const isInverse = themeVariant === 'inverse';
     const segmentColors = colors || (isInverse || isOverMedia ? DEFAULT_COLORS_INVERSE : DEFAULT_COLORS);
     const scaleFactor = VIEW_BOX_WIDTH / width;
+    const lineCapRadiusPx = hasRoundLineCaps ? STROKE_WIDTH_PX / 2 : 0;
+    const lineCapRadius = lineCapRadiusPx * scaleFactor;
     const strokeWidth = STROKE_WIDTH_PX * scaleFactor;
     const maxValue =
-        type === TYPE_LINEAR ? VIEW_BOX_WIDTH - strokeWidth : type === TYPE_CIRCULAR ? 2 * Math.PI : Math.PI;
+        type === TYPE_LINEAR
+            ? VIEW_BOX_WIDTH - lineCapRadius * 2
+            : type === TYPE_CIRCULAR
+              ? 2 * Math.PI
+              : Math.PI;
     const radius = type === TYPE_LINEAR ? 0 : CENTER_X - strokeWidth / 2;
     const separation = SEPARATION_PX * scaleFactor;
     const segmentSeparation =
         type === TYPE_LINEAR ? separation / VIEW_BOX_WIDTH : separation / radius / maxValue;
+
     const height =
-        type === TYPE_LINEAR
-            ? STROKE_WIDTH_PX
-            : type === TYPE_CIRCULAR
-              ? width
-              : width / 2 + STROKE_WIDTH_PX / 2;
+        type === TYPE_LINEAR ? STROKE_WIDTH_PX : type === TYPE_CIRCULAR ? width : width / 2 + lineCapRadiusPx;
+
     const viewBoxHeight =
         type === TYPE_LINEAR
             ? strokeWidth
             : type === TYPE_CIRCULAR
               ? VIEW_BOX_WIDTH
-              : VIEW_BOX_WIDTH / 2 + strokeWidth / 2;
+              : CENTER_X + lineCapRadius;
 
     const trackbarColor = isOverMedia
         ? vars.colors.inverse
         : isInverse
-          ? vars.colors.barTrack // @FIXME. Should be: barTrackInverse
+          ? vars.colors.barTrackInverse
           : vars.colors.barTrack;
 
+    /**  scale values to the range [0, 1] */
+    const values = React.useMemo(() => {
+        return valuesFromProps.map((v) => v / MAX_SEGMENT_VALUE);
+    }, [valuesFromProps]);
+
+    /** the animation starts with these values */
     const initialValuesRef = React.useRef<Array<number>>(
         Array.from({length: values.length}, () => (reverse ? 1 : 0))
     );
@@ -209,9 +221,9 @@ const MeterComponent = ({
     const getX = React.useCallback(
         (value: number) =>
             type === TYPE_LINEAR
-                ? strokeWidth / 2 + maxValue * value
+                ? lineCapRadius + maxValue * value
                 : CENTER_X - radius * Math.cos(value * maxValue),
-        [maxValue, radius, strokeWidth, type]
+        [lineCapRadius, maxValue, radius, type]
     );
 
     const getY = React.useCallback(
@@ -227,62 +239,85 @@ const MeterComponent = ({
             viewBox={`0 0 ${VIEW_BOX_WIDTH} ${viewBoxHeight}`}
             width={width}
             height={height}
-            style={{transform: `rotate(${type === TYPE_CIRCULAR ? '90deg' : 0})`}}
+            style={{transform: `rotate(${type === TYPE_CIRCULAR ? '90deg' : 0})`, display: 'block'}}
             aria-hidden={ariaHidden}
             role="meter"
             {...getPrefixedDataAttributes(dataAttributes, 'Meter')}
         >
             <defs>
-                <marker
-                    id="marker-current"
-                    viewBox="0 0 10 10"
-                    markerWidth={1}
-                    markerHeight={1}
-                    orient="auto"
-                    refX={5}
-                    refY={5}
-                >
-                    <path
-                        // the sub-pixel displacement is to avoid a gap between the marker and the path
-                        d={createPath({x1: 5 - 0.3, y1: 0, x2: 5 - 0.3, y2: 10, radius: 5})}
-                        fill={getColor(values.length - 1)}
-                    />
-                </marker>
-                <marker
-                    id="marker-start"
-                    viewBox="0 0 10 10"
-                    markerWidth={1}
-                    markerHeight={1}
-                    orient="auto"
-                    refX={5}
-                    refY={5}
-                >
-                    <path
-                        // the sub-pixel displacement is to avoid a gap between the marker and the path
-                        d={createPath({x1: 5 + 0.3, y1: 0, x2: 5 + 0.3, y2: 10, radius: 5, clockwise: 0})}
-                        fill={getColor(firstNonZeroIndex)}
-                    />
-                </marker>
+                {hasRoundLineCaps && (
+                    <>
+                        <marker
+                            id="marker-current"
+                            viewBox="0 0 10 10"
+                            markerWidth={1}
+                            markerHeight={1}
+                            orient="auto"
+                            refX={5}
+                            refY={5}
+                        >
+                            <path
+                                // the sub-pixel displacement is to avoid a gap between the marker and the path
+                                d={createPath({x1: 5 - 0.3, y1: 0, x2: 5 - 0.3, y2: 10, radius: 5})}
+                                fill={getColor(values.length - 1)}
+                            />
+                        </marker>
+                        <marker
+                            id="marker-start"
+                            viewBox="0 0 10 10"
+                            markerWidth={1}
+                            markerHeight={1}
+                            orient="auto"
+                            refX={5}
+                            refY={5}
+                        >
+                            <path
+                                // the sub-pixel displacement is to avoid a gap between the marker and the path
+                                d={createPath({
+                                    x1: 5 + 0.3,
+                                    y1: 0,
+                                    x2: 5 + 0.3,
+                                    y2: 10,
+                                    radius: 5,
+                                    clockwise: 0,
+                                })}
+                                fill={getColor(firstNonZeroIndex)}
+                            />
+                        </marker>
+                    </>
+                )}
                 <mask id="mask-bar-track" maskUnits="userSpaceOnUse">
                     <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
                     {firstNonZeroIndex >= 0 && lastSegment && (
                         <>
                             <path
+                                // this path is used to mask the trackbar
                                 stroke="black"
                                 fill="none"
                                 strokeWidth={strokeWidth + separation * 2}
-                                strokeLinecap={type === TYPE_CIRCULAR ? 'butt' : 'round'}
+                                strokeLinecap={type === TYPE_CIRCULAR || !hasRoundLineCaps ? 'butt' : 'round'}
                                 d={createPath({
                                     x1: getX(0),
                                     y1: getY(0),
-                                    x2: getX(lastSegment.end),
-                                    y2: getY(lastSegment.end),
+                                    x2: getX(
+                                        clamp(
+                                            lastSegment.end + (hasRoundLineCaps ? 0 : segmentSeparation),
+                                            0,
+                                            1 - SMALL_VALUE_THRESHOLD
+                                        )
+                                    ),
+                                    y2: getY(
+                                        clamp(
+                                            lastSegment.end + (hasRoundLineCaps ? 0 : segmentSeparation),
+                                            0,
+                                            1 - SMALL_VALUE_THRESHOLD
+                                        )
+                                    ),
                                     radius,
                                     largeArchFlag: type === TYPE_CIRCULAR ? lastSegment.end >= 0.5 : 0,
                                 })}
                             />
-
-                            {type === TYPE_CIRCULAR && (
+                            {type === TYPE_CIRCULAR && hasRoundLineCaps && (
                                 <circle
                                     cx={getX(lastSegment.end)}
                                     cy={getY(lastSegment.end)}
@@ -290,7 +325,6 @@ const MeterComponent = ({
                                     fill="black"
                                 />
                             )}
-
                             {type === TYPE_CIRCULAR && lastSegment.end <= 0.5 && (
                                 <rect
                                     x={0}
@@ -327,7 +361,7 @@ const MeterComponent = ({
                 opacity={isOverMedia ? 0.5 : 1}
                 fill="none"
                 strokeWidth={strokeWidth}
-                strokeLinecap={type === TYPE_CIRCULAR ? 'butt' : 'round'}
+                strokeLinecap={type === TYPE_CIRCULAR || !hasRoundLineCaps ? 'butt' : 'round'}
                 d={createPath({
                     x1: getX(0),
                     y1: getY(0),
diff --git a/src/theme-context-provider.tsx b/src/theme-context-provider.tsx
index cb76786ec..ea8615ce9 100644
--- a/src/theme-context-provider.tsx
+++ b/src/theme-context-provider.tsx
@@ -174,6 +174,7 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
                 ...sanitizeDimensions(theme.dimensions),
             },
             textPresets,
+            borderRadii: theme.skin.borderRadii ?? defaultBorderRadiiConfig,
             Link: getMisticaLinkComponent(theme.Link),
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === 'ios',
diff --git a/src/theme.tsx b/src/theme.tsx
index dc6d2e914..d7b8db68e 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type {RegionCode} from './utils/region-code';
 import type {Locale} from './utils/locale';
-import type {Colors, Skin, SkinName, TextPresetsConfig} from './skins/types';
+import type {BorderRadiiConfig, Colors, Skin, SkinName, TextPresetsConfig} from './skins/types';
 import type {TrackingEvent} from './utils/types';
 import type {Dictionary, TextToken} from './text-tokens';
 
@@ -162,6 +162,7 @@ export type Theme = {
     // TODO: rename this props to navigationBarHeight (or something similar) in next major
     dimensions: {headerMobileHeight: number; headerDesktopHeight: number};
     colorValues: Colors;
+    borderRadii: BorderRadiiConfig;
     textPresets: TextPresetsConfig;
     Link: LinkComponent;
     isDarkMode: boolean;