diff --git a/README.md b/README.md
index 7fe4815..4cd4833 100644
--- a/README.md
+++ b/README.md
@@ -71,7 +71,6 @@ The progressbar is designed to fill the width of its container. You can size the
 
 This makes the progressbar work well with responsive designs and grid systems.
 
-
 ## Props
 
 [**Take a look at the CodeSandbox**](https://codesandbox.io/s/vymm4oln6y) for interactive examples on how to use these props.
@@ -85,7 +84,8 @@ This makes the progressbar work well with responsive designs and grid systems.
 | `maxValue`          | Maximum value of the progressbar. Default: `100`.                                                                                                                                                                                      |
 | `className`         | Classes to apply to the svg element. Default: `''`.                                                                                                                                                                                    |
 | `text`              | Text to display inside progressbar. Default: `''`.                                                                                                                                                                                     |
-| `strokeWidth`       | Width of circular line relative to total width of component, a value from 0-100. Default: `8`.                                                                                                                                         |
+| `strokeWidthPath`   | Width of circular path line relative to total width of component, a value from 0-100. Default: `8`.                                                                                                                                    |
+| `strokeWidthTrail`  | Width of circular trial line relative to total width of component, a value from 0-100. Default: `3`.                                                                                                                                   |
 | `background`        | Whether to display background color. Default: `false`.                                                                                                                                                                                 |
 | `backgroundPadding` | Padding between background circle and path/trail relative to total width of component. Only used if `background` is `true`. Default: `0`.                                                                                              |
 | `counterClockwise`  | Whether to rotate progressbar in counterclockwise direction. Default: `false`.                                                                                                                                                         |
diff --git a/src/CircularProgressbar.tsx b/src/CircularProgressbar.tsx
index d93c172..dbfb727 100644
--- a/src/CircularProgressbar.tsx
+++ b/src/CircularProgressbar.tsx
@@ -26,7 +26,9 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
     className: '',
     maxValue: 100,
     minValue: 0,
-    strokeWidth: 8,
+    strokeWidthPath:8,
+    strokeWidthTrail: 3,
+    
     styles: {
       root: {},
       trail: {},
@@ -48,7 +50,7 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
   getPathRadius() {
     // The radius of the path is defined to be in the middle, so in order for the path to
     // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
-    return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();
+    return VIEWBOX_HEIGHT_HALF - this.props.strokeWidthPath / 2 - this.getBackgroundPadding();
   }
 
   // Ratio of path length to trail length, as a value between 0 and 1
@@ -65,7 +67,8 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
       classes,
       counterClockwise,
       styles,
-      strokeWidth,
+      strokeWidthPath,
+      strokeWidthTrail,
       text,
     } = this.props;
 
@@ -94,7 +97,7 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
           counterClockwise={counterClockwise}
           dashRatio={circleRatio}
           pathRadius={pathRadius}
-          strokeWidth={strokeWidth}
+          strokeWidth={strokeWidthTrail}
           style={styles.trail}
         />
 
@@ -103,7 +106,7 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
           counterClockwise={counterClockwise}
           dashRatio={pathRatio * circleRatio}
           pathRadius={pathRadius}
-          strokeWidth={strokeWidth}
+          strokeWidth={strokeWidthPath}
           style={styles.path}
         />
 
diff --git a/src/types.ts b/src/types.ts
index d86c746..8e18228 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -23,7 +23,8 @@ export type CircularProgressbarDefaultProps = {
   counterClockwise: boolean;
   maxValue: number;
   minValue: number;
-  strokeWidth: number;
+  strokeWidthTrail: number;
+  strokeWidthPath: number;
   styles: CircularProgressbarStyles;
   text: string;
 };
@@ -45,7 +46,8 @@ export type CircularProgressbarWrapperProps = {
   counterClockwise?: boolean;
   maxValue?: number;
   minValue?: number;
-  strokeWidth?: number;
+  strokeWidthTrail?: number;
+  strokeWidthPath?: number;
   styles?: CircularProgressbarStyles;
   text?: string;
   value: number;
diff --git a/test/CircularProgressbar.test.tsx b/test/CircularProgressbar.test.tsx
index 5a749b3..f12703e 100644
--- a/test/CircularProgressbar.test.tsx
+++ b/test/CircularProgressbar.test.tsx
@@ -5,12 +5,12 @@ import { CircularProgressbar } from '../src/index';
 
 function getExpectedStrokeDashoffset({
   percentage,
-  strokeWidth,
+  strokeWidthPath,
 }: {
   percentage: number;
-  strokeWidth: number;
+  strokeWidthPath: number;
 }) {
-  const radius = 50 - strokeWidth / 2;
+  const radius = 50 - strokeWidthPath / 2;
   const diameter = 2 * radius * Math.PI;
   const expectedGapLength = (1 - percentage / 100) * diameter;
   return `${expectedGapLength}px`;
@@ -20,13 +20,14 @@ function expectPathPercentageToEqual(
   wrapper: ReactWrapper<CircularProgressbar['props']>,
   percentage: number,
 ) {
-  const strokeWidth = wrapper.props().strokeWidth;
+  const strokeWidthTrail = wrapper.props().strokeWidthTrail;
+  const strokeWidthPath = wrapper.props().strokeWidthPath;
   expect(
     wrapper
       .find('.CircularProgressbar-path')
       .hostNodes()
       .prop('style')!.strokeDashoffset,
-  ).toEqual(getExpectedStrokeDashoffset({ percentage, strokeWidth }));
+  ).toEqual(getExpectedStrokeDashoffset({ percentage, strokeWidthPath }));
 }
 
 describe('<CircularProgressbar />', () => {
@@ -36,9 +37,13 @@ describe('<CircularProgressbar />', () => {
   });
   describe('props.strokeWidth', () => {
     test('Applies to path', () => {
-      const wrapper = shallow(<CircularProgressbar value={50} strokeWidth={2} />);
+      const wrapper = shallow(<CircularProgressbar value={50} strokeWidthPath={2} />);
       expect(wrapper.find('.CircularProgressbar-path').prop('strokeWidth')).toEqual(2);
     });
+    test('Applies to trail', () => {
+      const wrapper = shallow(<CircularProgressbar value={50} strokeWidthTrail={1} />);
+      expect(wrapper.find('.CircularProgressbar-trail').prop('strokeWidth')).toEqual(1);
+    });
   });
   describe('props.className', () => {
     test('Applies to SVG', () => {
@@ -60,7 +65,7 @@ describe('<CircularProgressbar />', () => {
   describe('props.value', () => {
     test('Renders correct path', () => {
       const percentage = 30;
-      const wrapper = mount(<CircularProgressbar value={percentage} strokeWidth={0} />);
+      const wrapper = mount(<CircularProgressbar value={percentage} strokeWidthTrail={0} strokeWidthPath={0} />);
 
       expectPathPercentageToEqual(wrapper, percentage);
 
@@ -149,7 +154,7 @@ describe('<CircularProgressbar />', () => {
       ).toEqual(
         getExpectedStrokeDashoffset({
           percentage: 100 * circleRatio,
-          strokeWidth: wrapper.props().strokeWidth,
+          strokeWidthPath: wrapper.props().strokeWidthPath,
         }),
       );
     });
diff --git a/test/CircularProgressbarWithChildren.test.tsx b/test/CircularProgressbarWithChildren.test.tsx
index 8ef1908..12b2c75 100644
--- a/test/CircularProgressbarWithChildren.test.tsx
+++ b/test/CircularProgressbarWithChildren.test.tsx
@@ -29,7 +29,8 @@ describe('<CircularProgressbarWithChildren />', () => {
       minValue: 0,
       maxValue: 100,
       value: 50,
-      strokeWidth: 2,
+      strokeWidthTrail: 2,
+      strokeWidthPath:3,
       styles: {},
       text: '50%',
     };