diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss
index 0d5077f0..b29fe6a1 100644
--- a/projects/angular-split/src/lib/component/split.component.scss
+++ b/projects/angular-split/src/lib/component/split.component.scss
@@ -8,6 +8,7 @@
   height: 100%;
 
   & > .as-split-gutter {
+    border: none;
     flex-grow: 0;
     flex-shrink: 0;
     background-color: #eeeeee;
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
index 0e7caf4b..32e1200b 100644
--- a/projects/angular-split/src/lib/component/split.component.ts
+++ b/projects/angular-split/src/lib/component/split.component.ts
@@ -29,6 +29,7 @@ import {
   getElementPixelSize,
   getGutterSideAbsorptionCapacity,
   updateAreaSize,
+  getKeyboardEndpoint
 } from '../utils'
 
 /**
@@ -68,19 +69,20 @@ import {
   styleUrls: [`./split.component.scss`],
   template: ` <ng-content></ng-content>
     <ng-template ngFor [ngForOf]="displayedAreas" let-index="index" let-last="last">
-      <div
+      <button
         *ngIf="last === false"
         #gutterEls
         class="as-split-gutter"
         [style.flex-basis.px]="gutterSize"
         [style.order]="index * 2 + 1"
-        (mousedown)="startDragging($event, index * 2 + 1, index + 1)"
-        (touchstart)="startDragging($event, index * 2 + 1, index + 1)"
+        (keydown)= "startKeyboardDrag($event, index * 2 + 1, index + 1)"
+        (mousedown)="startMouseDrag($event, index * 2 + 1, index + 1)"
+        (touchstart)="startMouseDrag($event, index * 2 + 1, index + 1)"
         (mouseup)="clickGutter($event, index + 1)"
         (touchend)="clickGutter($event, index + 1)"
       >
         <div class="as-split-gutter-icon"></div>
-      </div>
+      </button>
     </ng-template>`,
   encapsulation: ViewEncapsulation.Emulated,
 })
@@ -521,7 +523,28 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  public startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
+  public startKeyboardDrag(event: KeyboardEvent, gutterOrder: number, gutterNum: number) {
+    if (this.disabled === true || this.isWaitingClear === true) {
+      return
+    }
+
+    const endPoint = getKeyboardEndpoint(event, this.direction)
+    if (endPoint === null) {
+      return
+    }
+    this.endPoint = endPoint
+    this.startPoint = getPointFromEvent(event)
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.setupForDragEvent(gutterOrder, gutterNum)
+    this.startDragging()
+    this.drag()
+    this.stopDragging()
+  }
+
+  public startMouseDrag(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
     event.preventDefault()
     event.stopPropagation()
 
@@ -530,6 +553,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       return
     }
 
+    this.setupForDragEvent(gutterOrder, gutterNum)
+
+    this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)))
+    this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)))
+    this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)))
+
+    this.ngZone.runOutsideAngular(() => {
+      this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.mouseDragEvent.bind(this)))
+      this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.mouseDragEvent.bind(this)))
+    })
+
+    this.startDragging()
+  }
+
+  private setupForDragEvent(gutterOrder: number, gutterNum: number) {
     this.snapshot = {
       gutterNum,
       lastSteppedOffset: 0,
@@ -569,16 +607,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) {
       return
     }
+  }
 
-    this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)))
-    this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)))
-    this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)))
-
-    this.ngZone.runOutsideAngular(() => {
-      this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)))
-      this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)))
-    })
-
+  private startDragging() {
     this.displayedAreas.forEach((area) => area.component.lockEvents())
 
     this.isDragging = true
@@ -588,7 +619,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     this.notify('start', this.snapshot.gutterNum)
   }
 
-  private dragEvent(event: MouseEvent | TouchEvent): void {
+  private mouseDragEvent(event: MouseEvent | TouchEvent): void {
     event.preventDefault()
     event.stopPropagation()
 
@@ -602,10 +633,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     }
 
     this.endPoint = getPointFromEvent(event)
-    if (this.endPoint === null) {
-      return
-    }
+    this.drag()
+  }
 
+  private drag() {
     // Calculate steppedOffset
 
     let offset =
diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts
index 5b943b26..4152bc5e 100644
--- a/projects/angular-split/src/lib/utils.ts
+++ b/projects/angular-split/src/lib/utils.ts
@@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core'
 
 import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface'
 
-export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
+export function getPointFromEvent(event: MouseEvent | TouchEvent | KeyboardEvent): IPoint {
   // TouchEvent
   if ((<TouchEvent>event).changedTouches !== undefined && (<TouchEvent>event).changedTouches.length > 0) {
     return {
@@ -17,9 +17,55 @@ export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
       y: (<MouseEvent>event).clientY,
     }
   }
+  // KeyboardEvent
+  else if ((<KeyboardEvent>event).currentTarget !== undefined) {
+    const gutterEl = event.currentTarget as HTMLElement
+    return {
+      x: gutterEl.offsetLeft,
+      y: gutterEl.offsetTop
+    }
+  }
   return null
 }
 
+export function getKeyboardEndpoint(event: KeyboardEvent, direction: 'horizontal' | 'vertical'): IPoint | null {
+  // Return null if direction keys on the opposite axis were pressed
+  if (direction === 'horizontal') {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+          break
+      default:
+          return null
+    }
+  }
+  if (direction === 'vertical') {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+          break
+      default:
+          return null
+    }
+  }
+
+  const gutterEl = event.currentTarget as HTMLElement
+  const offset = 50;
+  let offsetX = gutterEl.offsetLeft, offsetY = gutterEl.offsetTop
+  switch (event.key) {
+      case 'ArrowLeft': offsetX -= offset; break
+      case 'ArrowRight': offsetX += offset; break
+      case 'ArrowUp': offsetY -= offset; break
+      case 'ArrowDown': offsetY += offset; break
+      default: return null
+  }
+
+  return {
+    x: offsetX,
+    y: offsetY
+  }
+}
+
 export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number {
   const rect = (<HTMLElement>elRef.nativeElement).getBoundingClientRect()