diff --git a/src/index.jsx b/src/index.jsx
index 0283bd7..122c3b1 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -103,6 +103,7 @@ class CircularProgressbar extends React.Component {
     return (
       <svg
         className={`${classes.root} ${className} ${classForPercentage}`}
+        style={styles.root}
         viewBox={`0 0 ${MAX_X} ${MAX_Y}`}
       >
         {
diff --git a/test/components/CircularProgressbar.spec.js b/test/components/CircularProgressbar.spec.js
index 7cf9559..43e6d42 100644
--- a/test/components/CircularProgressbar.spec.js
+++ b/test/components/CircularProgressbar.spec.js
@@ -119,15 +119,35 @@ describe('CircularProgressbar props', () => {
     const wrapper = shallow(
       <CircularProgressbar
         percentage={50}
+        background
         styles={{
-          path: { stroke: '#ffffff' },
+          root: { stroke: '#000000' },
+          trail: { stroke: '#111111' },
+          path: { stroke: '#222222' },
+          text: { stroke: '#333333' },
+          background: { stroke: '#444444' },
         }}
       />
     );
-
+    assert.equal(
+      wrapper.find('.CircularProgressbar').prop('style').stroke,
+      '#000000',
+    );
+    assert.equal(
+      wrapper.find('.CircularProgressbar-trail').prop('style').stroke,
+      '#111111',
+    );
     assert.equal(
       wrapper.find('.CircularProgressbar-path').prop('style').stroke,
-      '#ffffff',
+      '#222222',
+    );
+    assert.equal(
+      wrapper.find('.CircularProgressbar-text').prop('style').stroke,
+      '#333333',
+    );
+    assert.equal(
+      wrapper.find('.CircularProgressbar-background').prop('style').stroke,
+      '#444444',
     );
   });
 });