diff --git a/package.json b/package.json
index c458abe..a47cfab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cssarrowplease",
-  "version": "0.2.2-16",
+  "version": "0.2.2-18",
   "author": {
     "name": "Simon Højberg",
     "email": "r.hackr@gmail.com"
@@ -41,4 +41,4 @@
     "cssarrowplease.com",
     "www.cssarrowplease.com"
   ]
-}
\ No newline at end of file
+}
diff --git a/public/css/app.css b/public/css/app.css
index ea7a844..c137a21 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -32,12 +32,7 @@ input[type='radio']           { border: 0; }
 /* =MODULES
 ====================================================== */
 /* preview */
-.arrow_box                        { padding: 40px; width: 280px; height: 100px; border-radius: 6px; 
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-
-  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
-  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
-}
+.arrow_box                        { padding: 40px; width: 280px; height: 100px; border-radius: 6px; }
 
 /* logo */
 .logo                             { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
diff --git a/public/js/lib/models/arrow.js b/public/js/lib/models/arrow.js
index 262db02..aced0c3 100644
--- a/public/js/lib/models/arrow.js
+++ b/public/js/lib/models/arrow.js
@@ -61,7 +61,8 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
     @protected
     **/
     _baseCSS: function () {
-      var iPos        = this.invertedPosition(),
+      var pos         = this.get('position'),
+          iPos        = this.invertedPosition(),
           color       = this.get('color'),
           borderWidth = this.get('borderWidth'),
           borderColor = this.get('borderColor'),
@@ -81,6 +82,13 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
 
       css += '\t' + iPos +': 100%;\n';
 
+      if (pos === 'top' || pos === 'bottom') {
+        css += '\tleft: 50%;\n';
+      }
+      else {
+        css += '\ttop: 50%;\n';
+      }
+
       css += '\tborder: solid transparent;\n';
       css += '\tcontent: " ";\n';
       css += '\theight: 0;\n';
@@ -88,7 +96,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
       css += '\tposition: absolute;\n';
       css += '\tpointer-events: none;\n';
 
-      css += '}\n';
+      if(hasBorder) css += '}\n';
 
       return css;
     },
@@ -103,24 +111,25 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
     @protected
     **/
     _arrowCSS: function (color, size, layer) {
-      var pos       = this.get('position'),
-          iPos      = this.invertedPosition(),
-          rgbColor  = this.hexToRGB(color),
-          css       = ".arrow_box:";
+      var pos         = this.get('position'),
+          iPos        = this.invertedPosition(),
+          rgbColor    = this.hexToRGB(color),
+          borderWidth = this.get('borderWidth'),
+          css         = "";
 
       layer = layer || 'after';
 
-      css += layer + ' {\n';
+      if(borderWidth > 0) css += '.arrow_box:' + layer + ' {\n';
 
       css += '\tborder-color: rgba(' + rgbColor.join(', ') + ', 0);\n';
       css += '\tborder-' + iPos + '-color: ' + color + ';\n';
       css += '\tborder-width: ' + size + 'px;\n';
 
       if (pos === 'top' || pos === 'bottom') {
-        css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n';
+        css += '\tmargin-left: -' + size + 'px;\n';
       }
       else {
-        css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n';
+        css += '\tmargin-top: -' + size + 'px;\n';
       }
 
       css += '}';
@@ -176,7 +185,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
         this._arrowBorderCSS()
       ];
 
-      return css.join('\n');
+      return css.join(css[2] ? '\n':'');
     },
 
     /**
diff --git a/public/js/spec/models/arrow_spec.js b/public/js/spec/models/arrow_spec.js
index eaa73f7..ff3a7a8 100644
--- a/public/js/spec/models/arrow_spec.js
+++ b/public/js/spec/models/arrow_spec.js
@@ -134,6 +134,7 @@ describe("CSSArrowPlease.Arrow", function () {
             expected;
 
         expected = '\tbottom: 100%;\n';
+        expected = '\tleft: 50%;\n';
         expected += '\tborder: solid transparent;\n';
         expected += '\tcontent: " ";\n';
         expected += '\theight: 0;\n';
@@ -210,9 +211,10 @@ describe("CSSArrowPlease.Arrow", function () {
         beforeEach(function () { arrow.set('position', 'top'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'left: 50%' );
-          expect( css ).toMatch( 'margin-left: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'left: 50%' );
+          expect( arrowcss ).toMatch( 'margin-left: -20px' );
         });
       });
 
@@ -220,9 +222,10 @@ describe("CSSArrowPlease.Arrow", function () {
         beforeEach(function () { arrow.set('position', 'bottom'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'left: 50%' );
-          expect( css ).toMatch( 'margin-left: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'left: 50%' );
+          expect( arrowcss ).toMatch( 'margin-left: -20px' );
         });
       });
 
@@ -230,9 +233,10 @@ describe("CSSArrowPlease.Arrow", function () {
         beforeEach(function () { arrow.set('position', 'right'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'top: 50%' );
-          expect( css ).toMatch( 'margin-top: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'top: 50%' );
+          expect( arrowcss ).toMatch( 'margin-top: -20px' );
         });
       });
 
@@ -240,9 +244,10 @@ describe("CSSArrowPlease.Arrow", function () {
         beforeEach(function () { arrow.set('position', 'left'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'top: 50%' );
-          expect( css ).toMatch( 'margin-top: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'top: 50%' );
+          expect( arrowcss ).toMatch( 'margin-top: -20px' );
         });
       });