diff --git a/README.md b/README.md
index 447cd6e..d7279f5 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,10 @@ It has four color.
 - `black`
 - `green`
 
+#### className
+
+It would be an html tag's attribute `class`.
+
 ## Release Notes
 
 ### Version 0.5.1 - 2017/10/05
diff --git a/dst/react-github-fork-ribbon.js b/dst/react-github-fork-ribbon.js
index e28b500..ce4c72d 100644
--- a/dst/react-github-fork-ribbon.js
+++ b/dst/react-github-fork-ribbon.js
@@ -39,8 +39,9 @@ var GitHubForkRibbon = function GitHubForkRibbon(_ref) {
       target = _ref.target,
       _ref$color = _ref.color,
       color = _ref$color === undefined ? 'red' : _ref$color,
+      className = _ref.className,
       children = _ref.children,
-      other = _objectWithoutProperties(_ref, ['position', 'href', 'target', 'color', 'children']);
+      other = _objectWithoutProperties(_ref, ['position', 'href', 'target', 'color', 'className', 'children']);
 
   var positionStyle = positionMapping[position] || [_ribbonStyle.RibbonStyle.rightStyle, _ribbonStyle.RibbonStyleWrapper.rightStyle];
   var colorStyle = colorMapping[color] || _ribbonStyle.RibbonStyle.redColor;
@@ -56,7 +57,7 @@ var GitHubForkRibbon = function GitHubForkRibbon(_ref) {
   return _react2.default.createElement(
     'div',
     _extends({}, other, {
-      className: 'github-fork-ribbon-wrapper ' + position,
+      className: 'github-fork-ribbon-wrapper ' + position + ' ' + className,
       style: wrapperStyle }),
     _react2.default.createElement(
       'div',
@@ -138,7 +139,7 @@ var RibbonStyle = exports.RibbonStyle = {
 
     /* Add "stitching" effect */
     borderWidth: '1px 0',
-    borderStyle: 'dotted',
+    borderStyle: 'dashed',
     // borderColor: '#fff',
     borderColor: 'rgba(255, 255, 255, 0.7)'
   },
diff --git a/dst/react-github-fork-ribbon.min.js b/dst/react-github-fork-ribbon.min.js
index 4444dc5..f7ea67f 100644
--- a/dst/react-github-fork-ribbon.min.js
+++ b/dst/react-github-fork-ribbon.min.js
@@ -1 +1 @@
-!function t(e,o,r){function n(l,a){if(!o[l]){if(!e[l]){var b="function"==typeof require&&require;if(!a&&b)return b(l,!0);if(i)return i(l,!0);var f=new Error("Cannot find module '"+l+"'");throw f.code="MODULE_NOT_FOUND",f}var d=o[l]={exports:{}};e[l][0].call(d.exports,function(t){var o=e[l][1][t];return n(o?o:t)},d,d.exports,t,e,o,r)}return o[l].exports}for(var i="function"==typeof require&&require,l=0;l<r.length;l++)n(r[l]);return n}({1:[function(t,e,o){(function(e){"use strict";function r(t,e){var o={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(o[r]=t[r]);return o}Object.defineProperty(o,"__esModule",{value:!0});var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(t[r]=o[r])}return t},i=window.React,l=function(t){return t&&t.__esModule?t:{default:t}}(i),a=t("./ribbonStyle"),b={left:[a.RibbonStyle.leftStyle,a.RibbonStyleWrapper.leftStyle],right:[a.RibbonStyle.rightStyle,a.RibbonStyleWrapper.rightStyle],"left-bottom":[a.RibbonStyle.leftBottomStyle,a.RibbonStyleWrapper.leftBottomStyle],"right-bottom":[a.RibbonStyle.rightBottomStyle,a.RibbonStyleWrapper.rightBottomStyle]},f={red:a.RibbonStyle.redColor,orange:a.RibbonStyle.orangeColor,black:a.RibbonStyle.blackColor,green:a.RibbonStyle.greenColor},d=function(t){var e=t.position,o=void 0===e?"right":e,i=t.href,d=t.target,g=t.color,p=void 0===g?"red":g,s=t.children,y=r(t,["position","href","target","color","children"]),u=b[o]||[a.RibbonStyle.rightStyle,a.RibbonStyleWrapper.rightStyle],S=f[p]||a.RibbonStyle.redColor;u[0]===a.RibbonStyle.rightStyle&&(o="right");var c=n({},a.RibbonStyle.baseStyle,u[0],S),h=n({},a.RibbonStyleWrapper.baseStyle,u[1]);return l.default.createElement("div",n({},y,{className:"github-fork-ribbon-wrapper "+o,style:h}),l.default.createElement("div",{className:"github-fork-ribbon",style:c},l.default.createElement("a",{href:i,target:d,style:a.RibbonStyle.urlStyle},s)))};o.default=e.RibbonStyle=d}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./ribbonStyle":2}],2:[function(t,e,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0});o.RibbonStyle={baseStyle:{position:"absolute",padding:"2px 0",backgroundColor:"#a00",backgroundImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15))",WebkitBoxShadow:"0 2px 3px 0 rgba(0, 0, 0, 0.5)",MozBoxShadow:"0 2px 3px 0 rgba(0, 0, 0, 0.5)",boxShadow:"0 2px 3px 0 rgba(0, 0, 0, 0.5)",font:'700 13px "Helvetica Neue", Helvetica, Arial, sans-serif',zIndex:"9999",pointerEvents:"auto"},urlStyle:{color:"#fff",textDecoration:"none",textShadow:"0 -1px rgba(0, 0, 0, 0.5)",textAlign:"center",width:"200px",lineHeight:"20px",display:"inline-block",padding:"2px 0",borderWidth:"1px 0",borderStyle:"dotted",borderColor:"rgba(255, 255, 255, 0.7)"},redColor:{backgroundColor:"#a00"},orangeColor:{backgroundColor:"#f80"},blackColor:{backgroundColor:"#333"},greenColor:{backgroundColor:"#090"},leftStyle:{top:"42px",left:"-43px",WebkitTransform:"rotate(-45deg)",MozTransform:"rotate(-45deg)",msTransform:"rotate(-45deg)",OTransform:"rotate(-45deg)",transform:"rotate(-45deg)"},rightStyle:{top:"42px",right:"-43px",WebkitTransform:"rotate(45deg)",MozTransform:"rotate(45deg)",msTransform:"rotate(45deg)",OTransform:"rotate(45deg)",transform:"rotate(45deg)"},leftBottomStyle:{top:"80px",left:"-43px",WebkitTransform:"rotate(45deg)",MozTransform:"rotate(45deg)",msTransform:"rotate(45deg)",OTransform:"rotate(45deg)",transform:"rotate(45deg)"},rightBottomStyle:{top:"80px",right:"-43px",WebkitTransform:"rotate(-45deg)",MozTransform:"rotate(-45deg)",msTransform:"rotate(-45deg)",OTransform:"rotate(-45deg)",transform:"rotate(-45deg)"}},o.RibbonStyleWrapper={baseStyle:{width:"150px",height:"150px",position:"absolute",overflow:"hidden",top:0,zIndex:"9999",pointerEvents:"none"},fixedStyle:{position:"fixed"},leftStyle:{left:0},rightStyle:{right:0},leftBottomStyle:{position:"fixed",top:"inherit",bottom:0,left:0},rightBottomStyle:{position:"fixed",top:"inherit",bottom:0,right:0}}},{}]},{},[1]);
\ No newline at end of file
+!function e(t,o,r){function n(a,i){if(!o[a]){if(!t[a]){var b="function"==typeof require&&require;if(!i&&b)return b(a,!0);if(l)return l(a,!0);var f=new Error("Cannot find module '"+a+"'");throw f.code="MODULE_NOT_FOUND",f}var d=o[a]={exports:{}};t[a][0].call(d.exports,function(e){var o=t[a][1][e];return n(o?o:e)},d,d.exports,e,t,o,r)}return o[a].exports}for(var l="function"==typeof require&&require,a=0;a<r.length;a++)n(r[a]);return n}({1:[function(e,t,o){(function(t){"use strict";function r(e,t){var o={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(o[r]=e[r]);return o}Object.defineProperty(o,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},l=window.React,a=function(e){return e&&e.__esModule?e:{default:e}}(l),i=e("./ribbonStyle"),b={left:[i.RibbonStyle.leftStyle,i.RibbonStyleWrapper.leftStyle],right:[i.RibbonStyle.rightStyle,i.RibbonStyleWrapper.rightStyle],"left-bottom":[i.RibbonStyle.leftBottomStyle,i.RibbonStyleWrapper.leftBottomStyle],"right-bottom":[i.RibbonStyle.rightBottomStyle,i.RibbonStyleWrapper.rightBottomStyle]},f={red:i.RibbonStyle.redColor,orange:i.RibbonStyle.orangeColor,black:i.RibbonStyle.blackColor,green:i.RibbonStyle.greenColor},d=function(e){var t=e.position,o=void 0===t?"right":t,l=e.href,d=e.target,g=e.color,p=void 0===g?"red":g,s=e.className,y=e.children,u=r(e,["position","href","target","color","className","children"]),S=b[o]||[i.RibbonStyle.rightStyle,i.RibbonStyleWrapper.rightStyle],c=f[p]||i.RibbonStyle.redColor;S[0]===i.RibbonStyle.rightStyle&&(o="right");var h=n({},i.RibbonStyle.baseStyle,S[0],c),m=n({},i.RibbonStyleWrapper.baseStyle,S[1]);return a.default.createElement("div",n({},u,{className:"github-fork-ribbon-wrapper "+o+" "+s,style:m}),a.default.createElement("div",{className:"github-fork-ribbon",style:h},a.default.createElement("a",{href:l,target:d,style:i.RibbonStyle.urlStyle},y)))};o.default=t.RibbonStyle=d}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./ribbonStyle":2}],2:[function(e,t,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0});o.RibbonStyle={baseStyle:{position:"absolute",padding:"2px 0",backgroundColor:"#a00",backgroundImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15))",WebkitBoxShadow:"0 2px 3px 0 rgba(0, 0, 0, 0.5)",MozBoxShadow:"0 2px 3px 0 rgba(0, 0, 0, 0.5)",boxShadow:"0 2px 3px 0 rgba(0, 0, 0, 0.5)",font:'700 13px "Helvetica Neue", Helvetica, Arial, sans-serif',zIndex:"9999",pointerEvents:"auto"},urlStyle:{color:"#fff",textDecoration:"none",textShadow:"0 -1px rgba(0, 0, 0, 0.5)",textAlign:"center",width:"200px",lineHeight:"20px",display:"inline-block",padding:"2px 0",borderWidth:"1px 0",borderStyle:"dashed",borderColor:"rgba(255, 255, 255, 0.7)"},redColor:{backgroundColor:"#a00"},orangeColor:{backgroundColor:"#f80"},blackColor:{backgroundColor:"#333"},greenColor:{backgroundColor:"#090"},leftStyle:{top:"42px",left:"-43px",WebkitTransform:"rotate(-45deg)",MozTransform:"rotate(-45deg)",msTransform:"rotate(-45deg)",OTransform:"rotate(-45deg)",transform:"rotate(-45deg)"},rightStyle:{top:"42px",right:"-43px",WebkitTransform:"rotate(45deg)",MozTransform:"rotate(45deg)",msTransform:"rotate(45deg)",OTransform:"rotate(45deg)",transform:"rotate(45deg)"},leftBottomStyle:{top:"80px",left:"-43px",WebkitTransform:"rotate(45deg)",MozTransform:"rotate(45deg)",msTransform:"rotate(45deg)",OTransform:"rotate(45deg)",transform:"rotate(45deg)"},rightBottomStyle:{top:"80px",right:"-43px",WebkitTransform:"rotate(-45deg)",MozTransform:"rotate(-45deg)",msTransform:"rotate(-45deg)",OTransform:"rotate(-45deg)",transform:"rotate(-45deg)"}},o.RibbonStyleWrapper={baseStyle:{width:"150px",height:"150px",position:"absolute",overflow:"hidden",top:0,zIndex:"9999",pointerEvents:"none"},fixedStyle:{position:"fixed"},leftStyle:{left:0},rightStyle:{right:0},leftBottomStyle:{position:"fixed",top:"inherit",bottom:0,left:0},rightBottomStyle:{position:"fixed",top:"inherit",bottom:0,right:0}}},{}]},{},[1]);
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9151dbf..86915e5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,7 +19,7 @@ const colorMapping = {
   green: RibbonStyle.greenColor,
 };
 
-const GitHubForkRibbon = ({position = 'right', href, target, color = 'red', children, ...other}) => {
+const GitHubForkRibbon = ({position = 'right', href, target, color = 'red', className = '', children, ...other}) => {
 
   const positionStyle = positionMapping[position] || [RibbonStyle.rightStyle, RibbonStyleWrapper.rightStyle];
   const colorStyle = colorMapping[color] || RibbonStyle.redColor;
@@ -41,7 +41,7 @@ const GitHubForkRibbon = ({position = 'right', href, target, color = 'red', chil
 
   return (
     <div {...other}
-         className={`github-fork-ribbon-wrapper ${position}`}
+         className={`github-fork-ribbon-wrapper ${position} ${className}`}
          style={wrapperStyle}>
       <div className="github-fork-ribbon"
            style={ribbonStyle}>
diff --git a/storybook/__tests__/GithubForkRibbon.stories.js b/storybook/__tests__/GithubForkRibbon.stories.js
index 4062123..8fb0e3b 100644
--- a/storybook/__tests__/GithubForkRibbon.stories.js
+++ b/storybook/__tests__/GithubForkRibbon.stories.js
@@ -108,3 +108,25 @@ storiesOf('GitHub fork ribbon/color', module)
 
     return component;
   });
+
+storiesOf('GitHub fork ribbon/className', module)
+  .add('hidden on small devices up to 576px', () => {
+    const component = (
+      <div>
+        <style>
+        {`
+          @media (max-width: 576px) {
+            .custom-class {
+              display: none;
+            }
+          }
+        `}
+        </style>
+        <GitHubForkRibbon href="//www.google.com" target="_blank" className="custom-class">
+          Fork me on GitHub
+        </GitHubForkRibbon>
+      </div>
+    );
+
+    return component;
+  });