From a05f842a8456ba157392959da1e4178a3515334f Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Tue, 30 Aug 2016 10:48:28 +0300
Subject: [PATCH] Non-uniform borders

---
 apps/.vscode/launch.json                      |  62 +-
 .../ui-tests-app/css/border-playground.css    |  13 +
 .../app/ui-tests-app/css/border-playground.ts |  39 +
 .../ui-tests-app/css/border-playground.xml    |  39 +
 apps/app/ui-tests-app/css/button-border.css   |  78 ++
 apps/app/ui-tests-app/css/button-border.xml   |  22 +
 apps/app/ui-tests-app/css/image-border.css    |  77 ++
 apps/app/ui-tests-app/css/image-border.xml    |  22 +
 apps/app/ui-tests-app/css/label-border.css    |  77 ++
 apps/app/ui-tests-app/css/label-border.xml    |  22 +
 apps/app/ui-tests-app/css/layout-border.css   |  80 ++
 apps/app/ui-tests-app/css/layout-border.xml   |  22 +
 .../css/layouts-border-overlap.css            |  27 +
 .../css/layouts-border-overlap.xml            |  25 +
 apps/app/ui-tests-app/css/main-page.ts        |   9 +
 apps/app/ui-tests-app/css/measure-tests.css   |  11 +
 apps/app/ui-tests-app/css/measure-tests.xml   |  16 +
 .../ui-tests-app/css/text-field-border.css    |  77 ++
 .../ui-tests-app/css/text-field-border.xml    |  22 +
 .../app/ui-tests-app/css/text-view-border.css |  77 ++
 .../app/ui-tests-app/css/text-view-border.xml |  22 +
 apps/app/ui-tests-app/font/button.ts          |  15 +-
 .../app/ui-tests-app/image-view/gravatar2.png | Bin 0 -> 530 bytes
 package.json                                  |   2 +-
 .../app/ui/styling/style-properties-tests.ts  | 164 ++++-
 tests/app/ui/view/view-tests-common.ts        |   6 +-
 tests/app/ui/view/view-tests.android.ts       |  20 +-
 tests/app/ui/view/view-tests.d.ts             |   6 +-
 tests/app/ui/view/view-tests.ios.ts           |  14 +-
 tns-core-modules/color/color-common.ts        |   4 +
 .../org.nativescript.widgets.d.ts             |  52 +-
 tns-core-modules/ui/border/border.d.ts        |   4 +-
 tns-core-modules/ui/border/border.ts          |  18 +-
 tns-core-modules/ui/button/button.ios.ts      |  90 ++-
 tns-core-modules/ui/core/view-common.ts       | 104 ++-
 tns-core-modules/ui/core/view.android.ts      |  14 +-
 tns-core-modules/ui/core/view.d.ts            |  70 +-
 tns-core-modules/ui/core/view.ios.ts          | 120 +--
 tns-core-modules/ui/image/image.android.ts    |  48 --
 tns-core-modules/ui/label/label.ios.ts        | 132 +++-
 .../absolute-layout/absolute-layout.ios.ts    |   8 +-
 .../ui/layouts/dock-layout/dock-layout.ios.ts |  16 +-
 .../ui/layouts/grid-layout/grid-layout.ios.ts |   8 +-
 .../layouts/stack-layout/stack-layout.ios.ts  |  20 +-
 .../ui/layouts/wrap-layout/wrap-layout.ios.ts |  25 +-
 .../ui/progress/progress.android.ts           |  18 +-
 tns-core-modules/ui/slider/slider.android.ts  |  18 +-
 .../ui/styling/background-common.ts           | 293 ++++++--
 .../ui/styling/background.android.ts          |  34 +-
 tns-core-modules/ui/styling/background.d.ts   |  67 +-
 tns-core-modules/ui/styling/background.ios.ts | 168 ++++-
 tns-core-modules/ui/styling/style.d.ts        |  44 +-
 tns-core-modules/ui/styling/style.ts          | 694 +++++++++++++-----
 tns-core-modules/ui/styling/styling.d.ts      |  65 +-
 tns-core-modules/ui/switch/switch.android.ts  |  18 +-
 .../ui/text-field/text-field.ios.ts           |   6 +-
 .../ui/text-view/text-view.ios.ts             |  90 ++-
 57 files changed, 2643 insertions(+), 671 deletions(-)
 create mode 100644 apps/app/ui-tests-app/css/border-playground.css
 create mode 100644 apps/app/ui-tests-app/css/border-playground.ts
 create mode 100644 apps/app/ui-tests-app/css/border-playground.xml
 create mode 100644 apps/app/ui-tests-app/css/button-border.css
 create mode 100644 apps/app/ui-tests-app/css/button-border.xml
 create mode 100644 apps/app/ui-tests-app/css/image-border.css
 create mode 100644 apps/app/ui-tests-app/css/image-border.xml
 create mode 100644 apps/app/ui-tests-app/css/label-border.css
 create mode 100644 apps/app/ui-tests-app/css/label-border.xml
 create mode 100644 apps/app/ui-tests-app/css/layout-border.css
 create mode 100644 apps/app/ui-tests-app/css/layout-border.xml
 create mode 100644 apps/app/ui-tests-app/css/layouts-border-overlap.css
 create mode 100644 apps/app/ui-tests-app/css/layouts-border-overlap.xml
 create mode 100644 apps/app/ui-tests-app/css/measure-tests.css
 create mode 100644 apps/app/ui-tests-app/css/measure-tests.xml
 create mode 100644 apps/app/ui-tests-app/css/text-field-border.css
 create mode 100644 apps/app/ui-tests-app/css/text-field-border.xml
 create mode 100644 apps/app/ui-tests-app/css/text-view-border.css
 create mode 100644 apps/app/ui-tests-app/css/text-view-border.xml
 create mode 100644 apps/app/ui-tests-app/image-view/gravatar2.png

diff --git a/apps/.vscode/launch.json b/apps/.vscode/launch.json
index d2ea7615d..ba955c4f1 100644
--- a/apps/.vscode/launch.json
+++ b/apps/.vscode/launch.json
@@ -2,17 +2,30 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Launch on iOS Device",
+            "name": "Sync on iOS",
             "type": "nativescript",
             "platform": "ios",
             "request": "launch",
             "appRoot": "${workspaceRoot}",
             "sourceMaps": true,
             "diagnosticLogging": false,
-            "emulator": false
+            "emulator": false,
+            "rebuild": false,
+            "syncAllFiles": true
         },
         {
-            "name": "Attach on iOS Device",
+            "name": "Launch on iOS",
+            "type": "nativescript",
+            "platform": "ios",
+            "request": "launch",
+            "appRoot": "${workspaceRoot}",
+            "sourceMaps": true,
+            "diagnosticLogging": false,
+            "emulator": false,
+            "rebuild": true
+        },
+        {
+            "name": "Attach on iOS",
             "type": "nativescript",
             "platform": "ios",
             "request": "attach",
@@ -22,47 +35,30 @@
             "emulator": false
         },
         {
-            "name": "Launch on iOS Emulator",
-            "type": "nativescript",
-            "platform": "ios",
-            "request": "launch",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
-        },
-        {
-            "name": "Attach on iOS Emulator",
-            "type": "nativescript",
-            "platform": "ios",
-            "request": "attach",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
-        },
-        {
-            "name": "Launch on Android Device",
+            "name": "Sync on Android",
             "type": "nativescript",
             "platform": "android",
             "request": "launch",
             "appRoot": "${workspaceRoot}",
             "sourceMaps": true,
             "diagnosticLogging": false,
-            "emulator": false
+            "emulator": false,
+            "rebuild": false,
+            "syncAllFiles": true
         },
         {
-            "name": "Launch on Android Emulator",
+            "name": "Launch on Android",
             "type": "nativescript",
             "platform": "android",
             "request": "launch",
             "appRoot": "${workspaceRoot}",
             "sourceMaps": true,
             "diagnosticLogging": false,
-            "emulator": true
+            "emulator": false,
+            "rebuild": true
         },
         {
-            "name": "Attach on Android Device",
+            "name": "Attach on Android",
             "type": "nativescript",
             "platform": "android",
             "request": "attach",
@@ -70,16 +66,6 @@
             "sourceMaps": true,
             "diagnosticLogging": false,
             "emulator": false
-        },
-        {
-            "name": "Attach on Android Emulator",
-            "type": "nativescript",
-            "platform": "android",
-            "request": "attach",
-            "appRoot": "${workspaceRoot}",
-            "sourceMaps": true,
-            "diagnosticLogging": false,
-            "emulator": true
         }
     ]
 }
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/border-playground.css b/apps/app/ui-tests-app/css/border-playground.css
new file mode 100644
index 000000000..46ef62499
--- /dev/null
+++ b/apps/app/ui-tests-app/css/border-playground.css
@@ -0,0 +1,13 @@
+StackLayout {
+    background-color: lightgray;
+}
+
+Button {
+    font-size: 8;
+    width: 70;
+    height: 40;
+}
+
+TextView {
+    font-size: 8;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/border-playground.ts b/apps/app/ui-tests-app/css/border-playground.ts
new file mode 100644
index 000000000..ea037fc2d
--- /dev/null
+++ b/apps/app/ui-tests-app/css/border-playground.ts
@@ -0,0 +1,39 @@
+import { EventData } from "data/observable";
+import { View } from "ui/core/view";
+import { Button } from "ui/button";
+import { Color } from "color"; 
+import { TextView } from "ui/text-view";
+import { ScrollView } from "ui/scroll-view";
+
+let red = new Color("red");
+let green = new Color("green");
+
+export function onToggle(args: EventData){
+    let button = <Button>args.object;
+    let target = button.page.getViewById<View>("target");
+    let debugConsole = button.page.getViewById<TextView>("debugConsole");
+    let scrollView = button.page.getViewById<ScrollView>("scrollView");
+
+    if (button.text === "Color"){
+        target[button.id] = target[button.id] ? undefined : red;
+        debugConsole.text += `> border-color: ${target.borderColor}\n`;
+    }
+    else if (button.text === "Width"){
+        target[button.id] = target[button.id] ? 0 : 10; 
+        debugConsole.text += `> border-width: ${target.borderWidth}\n`;
+    }
+    else if (button.text === "Radius"){
+        target[button.id] = target[button.id] ? 0 : 10; 
+        debugConsole.text += `> border-radius: ${target.borderRadius}\n`;
+    }
+    else if (button.text === "BGColor"){
+        target.backgroundColor = target.backgroundColor ? undefined : green; 
+        debugConsole.text += `> background-color: ${target.backgroundColor}\n`;
+    }
+    else if (button.text === "BGImage"){
+        target.backgroundImage = target.backgroundImage ? undefined : `~/ui-tests-app/pages/test2.png`; 
+        debugConsole.text += `> background-image: ${target.backgroundImage}\n`;
+    }
+
+    scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/border-playground.xml b/apps/app/ui-tests-app/css/border-playground.xml
new file mode 100644
index 000000000..83d669808
--- /dev/null
+++ b/apps/app/ui-tests-app/css/border-playground.xml
@@ -0,0 +1,39 @@
+<Page>
+    <GridLayout rows="*,*,*,auto" columns="*,*,*">
+        <StackLayout id="top-left" class="button-container" row="0" col="0">
+            <Button text="Radius" id="borderTopLeftRadius" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="top" class="button-container" row="0" col="1">
+            <Button text="Color" id="borderTopColor" tap="onToggle"/>
+            <Button text="Width" id="borderTopWidth" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="top-right" class="button-container" row="0" col="2">
+            <Button text="Radius" id="borderTopRightRadius" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="left" class="button-container" row="1" col="0">
+            <Button text="Color" id="borderLeftColor" tap="onToggle"/>
+            <Button text="Width" id="borderLeftWidth" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="target" row="1" col="1">
+            <Button text="BGColor" tap="onToggle"/>
+            <Button text="BGImage" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="right" class="button-container" row="1" col="2">
+            <Button text="Color" id="borderRightColor" tap="onToggle"/>
+            <Button text="Width" id="borderRightWidth" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="bottom-left" class="button-container" row="2" col="0">
+            <Button text="Radius" id="borderBottomLeftRadius" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="bottom" class="button-container" row="2" col="1">
+            <Button text="Color" id="borderBottomColor" tap="onToggle"/>
+            <Button text="Width" id="borderBottomWidth" tap="onToggle"/>
+        </StackLayout>
+        <StackLayout id="bottom-right" class="button-container" row="2" col="2">
+            <Button text="Radius" id="borderBottomRightRadius" tap="onToggle"/>
+        </StackLayout>
+        <ScrollView id="scrollView" row="3" col="0" colSpan="3" height="200">
+            <TextView id="debugConsole" text=""/>
+        </ScrollView>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/button-border.css b/apps/app/ui-tests-app/css/button-border.css
new file mode 100644
index 000000000..c7a843cdc
--- /dev/null
+++ b/apps/app/ui-tests-app/css/button-border.css
@@ -0,0 +1,78 @@
+Button {
+    font-size: 6;
+    width: 80;
+    height: 80;
+    color: black;
+}
+
+#s0 {
+    border-width: 5;
+}
+
+#s1 {
+    border-width: 5; border-color: red;
+}
+
+#s2 {
+    border-width: 5; border-color: red red red green;
+}
+
+#s3 {
+    border-width: 5; border-color: red; border-radius: 5;
+}
+
+#s4 {
+    border-width: 5; border-color: red; border-radius: 50;
+}
+
+#s5 {
+    border-width: 5 10 15 20; border-color: red;
+}
+
+#s6 {
+    border-width: 5; border-color: red green blue yellow;
+}
+
+#s7 {
+    border-width: 5 10 15 20; border-color: red green blue yellow;
+}
+
+#s8 {
+    border-width: 5 10; border-color: red green;
+}
+
+#s9 {
+    border-width: 15 10 5; border-color: red green blue;
+}
+
+#s10 {
+    border-width: 5 0; border-color: black;
+}
+
+#s11 {
+    background-color: magenta;
+}
+
+#s12 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+}
+
+#s13 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+}
+
+#s14 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+}
+
+#s15 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
+}
+
+#s16 {
+    border-width: 5; border-color: red; padding: 5;
+}
+
+#s17 {
+    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+}
diff --git a/apps/app/ui-tests-app/css/button-border.xml b/apps/app/ui-tests-app/css/button-border.xml
new file mode 100644
index 000000000..a74c7ced4
--- /dev/null
+++ b/apps/app/ui-tests-app/css/button-border.xml
@@ -0,0 +1,22 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <Button  id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
+        <Button  id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
+        <Button  id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
+        <Button  id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
+        <Button  id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
+        <Button  id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
+        <Button  id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
+        <Button  id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
+        <Button  id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
+        <Button  id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
+        <Button id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
+        <Button id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
+        <Button id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
+        <Button id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
+        <Button id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
+        <Button id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
+        <Button id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
+        <Button id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/image-border.css b/apps/app/ui-tests-app/css/image-border.css
new file mode 100644
index 000000000..2316aae92
--- /dev/null
+++ b/apps/app/ui-tests-app/css/image-border.css
@@ -0,0 +1,77 @@
+Image {
+    width: 80;
+    height: 80;
+    background-color: cyan;
+}
+
+#s0 {
+    border-width: 5;
+}
+
+#s1 {
+    border-width: 5; border-color: red;
+}
+
+#s2 {
+    border-width: 5; border-color: red red red green;
+}
+
+#s3 {
+    border-width: 5; border-color: red; border-radius: 5;
+}
+
+#s4 {
+    border-width: 5; border-color: red; border-radius: 50;
+}
+
+#s5 {
+    border-width: 5 10 15 20; border-color: red;
+}
+
+#s6 {
+    border-width: 5; border-color: red green blue yellow;
+}
+
+#s7 {
+    border-width: 5 10 15 20; border-color: red green blue yellow;
+}
+
+#s8 {
+    border-width: 5 10; border-color: red green;
+}
+
+#s9 {
+    border-width: 15 10 5; border-color: red green blue;
+}
+
+#s10 {
+    border-width: 5 0; border-color: black;
+}
+
+#s11 {
+    background-color: magenta;
+}
+
+#s12 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+}
+
+#s13 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+}
+
+#s14 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+}
+
+#s15 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
+}
+
+#s16 {
+    border-width: 5; border-color: red; padding: 5;
+}
+
+#s17 {
+    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+}
diff --git a/apps/app/ui-tests-app/css/image-border.xml b/apps/app/ui-tests-app/css/image-border.xml
new file mode 100644
index 000000000..f032972a7
--- /dev/null
+++ b/apps/app/ui-tests-app/css/image-border.xml
@@ -0,0 +1,22 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <Image  id="s0" row="0" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s1" row="0" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s2" row="0" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s3" row="1" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s4" row="1" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s5" row="1" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s6" row="2" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s7" row="2" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s8" row="2" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image  id="s9" row="3" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s10" row="3" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s11" row="3" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s12" row="4" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s13" row="4" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s14" row="4" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s15" row="5" col="0" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s16" row="5" col="1" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+        <Image id="s17" row="5" col="2" src="~/ui-tests-app/image-view/gravatar.png" stretch="fill"/>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/label-border.css b/apps/app/ui-tests-app/css/label-border.css
new file mode 100644
index 000000000..3bb2b8467
--- /dev/null
+++ b/apps/app/ui-tests-app/css/label-border.css
@@ -0,0 +1,77 @@
+Label {
+    font-size: 6;
+    width: 80;
+    height: 80;
+}
+
+#s0 {
+    border-width: 5;
+}
+
+#s1 {
+    border-width: 5; border-color: red;
+}
+
+#s2 {
+    border-width: 5; border-color: red red red green;
+}
+
+#s3 {
+    border-width: 5; border-color: red; border-radius: 5;
+}
+
+#s4 {
+    border-width: 5; border-color: red; border-radius: 50;
+}
+
+#s5 {
+    border-width: 5 10 15 20; border-color: red;
+}
+
+#s6 {
+    border-width: 5; border-color: red green blue yellow;
+}
+
+#s7 {
+    border-width: 5 10 15 20; border-color: red green blue yellow;
+}
+
+#s8 {
+    border-width: 5 10; border-color: red green;
+}
+
+#s9 {
+    border-width: 15 10 5; border-color: red green blue;
+}
+
+#s10 {
+    border-width: 5 0; border-color: black;
+}
+
+#s11 {
+    background-color: magenta;
+}
+
+#s12 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+}
+
+#s13 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+}
+
+#s14 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+}
+
+#s15 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
+}
+
+#s16 {
+    border-width: 5; border-color: red; padding: 5;
+}
+
+#s17 {
+    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+}
diff --git a/apps/app/ui-tests-app/css/label-border.xml b/apps/app/ui-tests-app/css/label-border.xml
new file mode 100644
index 000000000..5eaf42f60
--- /dev/null
+++ b/apps/app/ui-tests-app/css/label-border.xml
@@ -0,0 +1,22 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <Label  id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
+        <Label  id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
+        <Label  id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
+        <Label  id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
+        <Label  id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
+        <Label  id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
+        <Label  id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
+        <Label  id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
+        <Label  id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
+        <Label  id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
+        <Label id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
+        <Label id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
+        <Label id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
+        <Label id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
+        <Label id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
+        <Label id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
+        <Label id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
+        <Label id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/layout-border.css b/apps/app/ui-tests-app/css/layout-border.css
new file mode 100644
index 000000000..646486cce
--- /dev/null
+++ b/apps/app/ui-tests-app/css/layout-border.css
@@ -0,0 +1,80 @@
+StackLayout {
+    width: 80;
+    height: 80;
+}
+
+Label {
+    font-size: 6;
+}
+
+#s0 {
+    border-width: 5;
+}
+
+#s1 {
+    border-width: 5; border-color: red;
+}
+
+#s2 {
+    border-width: 5; border-color: red red red green;
+}
+
+#s3 {
+    border-width: 5; border-color: red; border-radius: 5;
+}
+
+#s4 {
+    border-width: 5; border-color: red; border-radius: 50;
+}
+
+#s5 {
+    border-width: 5 10 15 20; border-color: red;
+}
+
+#s6 {
+    border-width: 5; border-color: red green blue yellow;
+}
+
+#s7 {
+    border-width: 5 10 15 20; border-color: red green blue yellow;
+}
+
+#s8 {
+    border-width: 5 10; border-color: red green;
+}
+
+#s9 {
+    border-width: 15 10 5; border-color: red green blue;
+}
+
+#s10 {
+    border-width: 5 0; border-color: black;
+}
+
+#s11 {
+    background-color: magenta;
+}
+
+#s12 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+}
+
+#s13 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+}
+
+#s14 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+}
+
+#s15 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
+}
+
+#s16 {
+    border-width: 5; border-color: red; padding: 5;
+}
+
+#s17 {
+    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+}
diff --git a/apps/app/ui-tests-app/css/layout-border.xml b/apps/app/ui-tests-app/css/layout-border.xml
new file mode 100644
index 000000000..a901b33e6
--- /dev/null
+++ b/apps/app/ui-tests-app/css/layout-border.xml
@@ -0,0 +1,22 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <StackLayout  id="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
+        <StackLayout  id="s1" row="0" col="1"><Label textWrap="true" text="border-width: 5; border-color: red;"/></StackLayout>
+        <StackLayout  id="s2" row="0" col="2"><Label textWrap="true" text="border-width: 5; border-color: red red red green;"/></StackLayout>
+        <StackLayout  id="s3" row="1" col="0"><Label textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/></StackLayout>
+        <StackLayout  id="s4" row="1" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/></StackLayout>
+        <StackLayout  id="s5" row="1" col="2"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/></StackLayout>
+        <StackLayout  id="s6" row="2" col="0"><Label textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/></StackLayout>
+        <StackLayout  id="s7" row="2" col="1"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/></StackLayout>
+        <StackLayout  id="s8" row="2" col="2"><Label textWrap="true" text="border-width: 5 10; border-color: red green;"/></StackLayout>
+        <StackLayout  id="s9" row="3" col="0"><Label textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/></StackLayout>
+        <StackLayout id="s10" row="3" col="1"><Label textWrap="true" text="border-width: 5 0; border-color: black;"/></StackLayout>
+        <StackLayout id="s11" row="3" col="2"><Label textWrap="true" text="background-color: magenta;"/></StackLayout>
+        <StackLayout id="s12" row="4" col="0"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/></StackLayout>
+        <StackLayout id="s13" row="4" col="1"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/></StackLayout>
+        <StackLayout id="s14" row="4" col="2"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/></StackLayout>
+        <StackLayout id="s15" row="5" col="0"><Label textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/></StackLayout>
+        <StackLayout id="s16" row="5" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/></StackLayout>
+        <StackLayout id="s17" row="5" col="2"><Label textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/></StackLayout>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/layouts-border-overlap.css b/apps/app/ui-tests-app/css/layouts-border-overlap.css
new file mode 100644
index 000000000..316aed186
--- /dev/null
+++ b/apps/app/ui-tests-app/css/layouts-border-overlap.css
@@ -0,0 +1,27 @@
+StackLayout, AbsoluteLayout, DockLayout, GridLayout, WrapLayout {
+    margin: 5;
+    background-color: yellow;
+}
+
+#root {
+    background-color: white;
+}
+
+Label {
+    font-size: 6;
+    text-align: left;
+    vertical-align: top;
+    background-color: red;
+}
+
+.s0 {
+    border-width: 20;
+}
+
+.s1 {
+    padding: 20;
+}
+
+.s2 {
+    border-width: 20 0 0 20; border-color:black;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/layouts-border-overlap.xml b/apps/app/ui-tests-app/css/layouts-border-overlap.xml
new file mode 100644
index 000000000..fde4f543d
--- /dev/null
+++ b/apps/app/ui-tests-app/css/layouts-border-overlap.xml
@@ -0,0 +1,25 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*" columns="*,*,*" id="root">
+
+        <StackLayout  class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 5;"/></StackLayout>
+        <StackLayout  class="s1" row="0" col="1"><Label textWrap="true" text="padding: 5;"/></StackLayout>
+        <StackLayout  class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></StackLayout>
+        
+        <AbsoluteLayout  class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 5;"/></AbsoluteLayout>
+        <AbsoluteLayout  class="s1" row="1" col="1"><Label textWrap="true" text="padding: 5;"/></AbsoluteLayout>
+        <AbsoluteLayout  class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></AbsoluteLayout>
+        
+        <DockLayout  class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 5;"/></DockLayout>
+        <DockLayout  class="s1" row="2" col="1"><Label textWrap="true" text="padding: 5;"/></DockLayout>
+        <DockLayout  class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></DockLayout>
+        
+        <GridLayout  class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 5;"/></GridLayout>
+        <GridLayout  class="s1" row="3" col="1"><Label textWrap="true" text="padding: 5;"/></GridLayout>
+        <GridLayout  class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></GridLayout>
+        
+        <WrapLayout  class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 5;"/></WrapLayout>
+        <WrapLayout  class="s1" row="4" col="1"><Label textWrap="true" text="padding: 5;"/></WrapLayout>
+        <WrapLayout  class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 5 5 20;"/></WrapLayout>
+        
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index d0f64ab21..9442ebfc0 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/apps/app/ui-tests-app/css/main-page.ts
@@ -26,6 +26,15 @@ export function pageLoaded(args: EventData) {
     examples.set("padding", "css/padding");
     examples.set("label-background-image", "css/label-background-image");
     examples.set("transform-decoration-color", "css/transform-decoration-color");
+    examples.set("layout-border", "css/layout-border");
+    examples.set("label-border", "css/label-border");
+    examples.set("button-border", "css/button-border");
+    examples.set("text-field-border", "css/text-field-border");
+    examples.set("text-view-border", "css/text-view-border");
+    examples.set("image-border", "css/image-border");
+    examples.set("layouts-border-overlap", "css/layouts-border-overlap");
+    examples.set("measure-tests", "css/measure-tests");
+    //examples.set("border-playground", "css/border-playground");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;
diff --git a/apps/app/ui-tests-app/css/measure-tests.css b/apps/app/ui-tests-app/css/measure-tests.css
new file mode 100644
index 000000000..a73d01f15
--- /dev/null
+++ b/apps/app/ui-tests-app/css/measure-tests.css
@@ -0,0 +1,11 @@
+.c {
+    border-width: 5; padding: 5; border-color: magenta; background-color: cyan;
+}
+
+.c1 {
+    border-width: 5; border-color: red green blue yellow; background-color: white; horizontal-align: left; margin: 1;
+}
+
+.c2 {
+    border-width: 5; padding: 10; border-color: red green blue yellow; background-color: white; horizontal-align: left; margin: 1;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/measure-tests.xml b/apps/app/ui-tests-app/css/measure-tests.xml
new file mode 100644
index 000000000..e922d024c
--- /dev/null
+++ b/apps/app/ui-tests-app/css/measure-tests.xml
@@ -0,0 +1,16 @@
+<Page>
+    <StackLayout class="c">
+
+        <Label text="Label" class="c1"/>
+        <Button text="Button" class="c1"/>
+        <TextField text="TextField" class="c1"/>
+        <TextView text="TextView" class="c1"/>
+        <Image src="~/ui-tests-app/image-view/gravatar2.png" class="c1" stretch="none"/>    
+
+        <Label text="Label" class="c2"/>
+        <Button text="Button" class="c2"/>
+        <TextField text="TextField" class="c2"/>
+        <TextView text="TextView" class="c2" style.horizonhorizontalAlignmenttalAligment="left"/>
+        <Image src="~/ui-tests-app/image-view/gravatar2.png" class="c2" stretch="none"/>    
+    </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/text-field-border.css b/apps/app/ui-tests-app/css/text-field-border.css
new file mode 100644
index 000000000..e957affbf
--- /dev/null
+++ b/apps/app/ui-tests-app/css/text-field-border.css
@@ -0,0 +1,77 @@
+TextField {
+    font-size: 6;
+    width: 80;
+    height: 80;
+}
+
+#s0 {
+    border-width: 5;
+}
+
+#s1 {
+    border-width: 5; border-color: red;
+}
+
+#s2 {
+    border-width: 5; border-color: red red red green;
+}
+
+#s3 {
+    border-width: 5; border-color: red; border-radius: 5;
+}
+
+#s4 {
+    border-width: 5; border-color: red; border-radius: 50;
+}
+
+#s5 {
+    border-width: 5 10 15 20; border-color: red;
+}
+
+#s6 {
+    border-width: 5; border-color: red green blue yellow;
+}
+
+#s7 {
+    border-width: 5 10 15 20; border-color: red green blue yellow;
+}
+
+#s8 {
+    border-width: 5 10; border-color: red green;
+}
+
+#s9 {
+    border-width: 15 10 5; border-color: red green blue;
+}
+
+#s10 {
+    border-width: 5 0; border-color: black;
+}
+
+#s11 {
+    background-color: magenta;
+}
+
+#s12 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+}
+
+#s13 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+}
+
+#s14 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+}
+
+#s15 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
+}
+
+#s16 {
+    border-width: 5; border-color: red; padding: 5;
+}
+
+#s17 {
+    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+}
diff --git a/apps/app/ui-tests-app/css/text-field-border.xml b/apps/app/ui-tests-app/css/text-field-border.xml
new file mode 100644
index 000000000..22cdf942b
--- /dev/null
+++ b/apps/app/ui-tests-app/css/text-field-border.xml
@@ -0,0 +1,22 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <TextField  id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
+        <TextField  id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
+        <TextField  id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
+        <TextField  id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
+        <TextField  id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
+        <TextField  id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
+        <TextField  id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
+        <TextField  id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
+        <TextField  id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
+        <TextField  id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
+        <TextField id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
+        <TextField id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
+        <TextField id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
+        <TextField id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
+        <TextField id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
+        <TextField id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
+        <TextField id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
+        <TextField id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/text-view-border.css b/apps/app/ui-tests-app/css/text-view-border.css
new file mode 100644
index 000000000..bde17df93
--- /dev/null
+++ b/apps/app/ui-tests-app/css/text-view-border.css
@@ -0,0 +1,77 @@
+TextView {
+    font-size: 6;
+    width: 80;
+    height: 80;
+}
+
+#s0 {
+    border-width: 5;
+}
+
+#s1 {
+    border-width: 5; border-color: red;
+}
+
+#s2 {
+    border-width: 5; border-color: red red red green;
+}
+
+#s3 {
+    border-width: 5; border-color: red; border-radius: 5;
+}
+
+#s4 {
+    border-width: 5; border-color: red; border-radius: 50;
+}
+
+#s5 {
+    border-width: 6 5 5 5; border-color: green;
+}
+
+#s6 {
+    border-width: 5; border-color: red green blue yellow;
+}
+
+#s7 {
+    border-width: 5 10 15 20; border-color: red green blue yellow;
+}
+
+#s8 {
+    border-width: 5 10; border-color: red green;
+}
+
+#s9 {
+    border-width: 15 10 5; border-color: red green blue;
+}
+
+#s10 {
+    border-width: 5 0; border-color: black;
+}
+
+#s11 {
+    background-color: magenta;
+}
+
+#s12 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+}
+
+#s13 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+}
+
+#s14 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+}
+
+#s15 {
+    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');
+}
+
+#s16 {
+    border-width: 5; border-color: red; padding: 5;
+}
+
+#s17 {
+    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+}
diff --git a/apps/app/ui-tests-app/css/text-view-border.xml b/apps/app/ui-tests-app/css/text-view-border.xml
new file mode 100644
index 000000000..39dfeec19
--- /dev/null
+++ b/apps/app/ui-tests-app/css/text-view-border.xml
@@ -0,0 +1,22 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*,">
+        <TextView  id="s0" row="0" col="0" textWrap="true" text="border-width: 5;"/>
+        <TextView  id="s1" row="0" col="1" textWrap="true" text="border-width: 5; border-color: red;"/>
+        <TextView  id="s2" row="0" col="2" textWrap="true" text="border-width: 5; border-color: red red red green;"/>
+        <TextView  id="s3" row="1" col="0" textWrap="true" text="border-width: 5; border-color: red; border-radius: 5;"/>
+        <TextView  id="s4" row="1" col="1" textWrap="true" text="border-width: 5; border-color: red; border-radius: 50;"/>
+        <TextView  id="s5" row="1" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red;"/>
+        <TextView  id="s6" row="2" col="0" textWrap="true" text="border-width: 5; border-color: red green blue yellow;"/>
+        <TextView  id="s7" row="2" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow;"/>
+        <TextView  id="s8" row="2" col="2" textWrap="true" text="border-width: 5 10; border-color: red green;"/>
+        <TextView  id="s9" row="3" col="0" textWrap="true" text="border-width: 15 10 5; border-color: red green blue;"/>
+        <TextView id="s10" row="3" col="1" textWrap="true" text="border-width: 5 0; border-color: black;"/>
+        <TextView id="s11" row="3" col="2" textWrap="true" text="background-color: magenta;"/>
+        <TextView id="s12" row="4" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;"/>
+        <TextView id="s13" row="4" col="1" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;"/>
+        <TextView id="s14" row="4" col="2" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;"/>
+        <TextView id="s15" row="5" col="0" textWrap="true" text="border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/ui-tests-app/pages/test2.png');"/>
+        <TextView id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
+        <TextView id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
+    </GridLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/font/button.ts b/apps/app/ui-tests-app/font/button.ts
index c9c0d1c17..5c6bbee70 100644
--- a/apps/app/ui-tests-app/font/button.ts
+++ b/apps/app/ui-tests-app/font/button.ts
@@ -14,9 +14,18 @@ export function resetStyles(args) {
         v.style._resetValue(style.paddingRightProperty);
         v.style._resetValue(style.paddingTopProperty);
         v.style._resetValue(style.paddingBottomProperty);
-        v.style._resetValue(style.borderColorProperty);
-        v.style._resetValue(style.borderWidthProperty);
-        v.style._resetValue(style.borderRadiusProperty);
+        v.style._resetValue(style.borderTopColorProperty);
+        v.style._resetValue(style.borderRightColorProperty);
+        v.style._resetValue(style.borderBottomColorProperty);
+        v.style._resetValue(style.borderLeftColorProperty);
+        v.style._resetValue(style.borderTopWidthProperty);
+        v.style._resetValue(style.borderRightWidthProperty);
+        v.style._resetValue(style.borderBottomWidthProperty);
+        v.style._resetValue(style.borderLeftWidthProperty);
+        v.style._resetValue(style.borderTopLeftRadiusProperty);
+        v.style._resetValue(style.borderTopRightRadiusProperty);
+        v.style._resetValue(style.borderBottomRightRadiusProperty);
+        v.style._resetValue(style.borderBottomLeftRadiusProperty);
         return true;
     });
 }
diff --git a/apps/app/ui-tests-app/image-view/gravatar2.png b/apps/app/ui-tests-app/image-view/gravatar2.png
new file mode 100644
index 0000000000000000000000000000000000000000..23658b667ccb0c9eb62b64274048ca56af17fe2d
GIT binary patch
literal 530
zcmV+t0`2{YP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80005mNkl<ZScUDE
zKTE?v7{;GVE*j9JqJDt5ib6U$IM~U>%`c!^$9$C*Cnra{yLGaHpdkLEbP}qol#<$%
z7Ml>K6z`hLH6+@lKge)@a`z<1``+`Cm;Om;=?+X<#BaQyh4)bvJ1gf*|Fye?B=*f`
zXi8zyZVt-mjO(#;4b=wi`VDlw2G;2TEZu=ZmhnES3SUZ#r8~m4EZqT(8j+B^Syi{O
zsU1#<FjN~GS_w+-JH}w?j<AnTjd1X1zGvKk5>q(;_RD74rL{H)mH-d{;iO+BIsl~q
z1C*H1l!EYy<70HjYz_eJVTBc7s5W+2E?}=-qM+`j)g@#Qyy0_vHPzn>?&11(poVJ0
z(j9DQrO9B?sKNE`&>mLM3+^)si2M48_OJpHh9NU5i}S4TdE#H9Ac=(lDvNVIuG6w_
zJ~M58y{SYL#d%)H)|&efECehB%v}Ka4qWCg$Qt)D_&h`NjQLsM^UU0jVD18_%(wRg
zHkb4FIS+rgM0Q_PcPMd=H6m$jR=R!zkKQp}y;FSoPw;{knu9VP`bX%D>!32<o)@CJ
zLjjU~`(Hx=B>HyQea@5CPbfgLZ=c2Y|Awy{WGFJ<o)@CJgUWn+(WqtKIH~UV0izwn
U()KwM=Kufz07*qoM6N<$f}4r{G5`Po

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index 42350b342..62b86df04 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "shelljs": "^0.7.0",
     "time-grunt": "1.3.0",
     "tslint": "3.4.0",
-    "typescript": "1.8.2"
+    "typescript": "1.8.10"
   },
   "scripts": {
     "tsc-tiw": "node build/tsc-dev.js tiw",
diff --git a/tests/app/ui/styling/style-properties-tests.ts b/tests/app/ui/styling/style-properties-tests.ts
index e60a9f853..768de2843 100644
--- a/tests/app/ui/styling/style-properties-tests.ts
+++ b/tests/app/ui/styling/style-properties-tests.ts
@@ -178,6 +178,54 @@ export function test_horizontalAlignment_property_is_synced_in_style_and_view()
     test_property_is_synced_in_style_and_view("horizontalAlignment", "right");
 }
 
+export function test_borderTopColor_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderTopColor", new color.Color("red"));
+}
+
+export function test_borderRightColor_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderRightColor", new color.Color("green"));
+}
+
+export function test_borderBottomColor_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderBottomColor", new color.Color("blue"));
+}
+
+export function test_borderLeftColor_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderLeftColor", new color.Color("yellow"));
+}
+
+export function test_borderTopWidth_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderTopWidth", 10);
+}
+
+export function test_borderRightWidth_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderRightWidth", 20);
+}
+
+export function test_borderBottomWidth_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderBottomWidth", 30);
+}
+
+export function test_borderLeftWidth_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderLeftWidth", 40);
+}
+
+export function test_borderTopLeftRadiusWidth_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderTopLeftRadius", 10);
+}
+
+export function test_borderTopRightRadius_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderTopRightRadius", 20);
+}
+
+export function test_borderBottomRightRadius_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderBottomRightRadius", 30);
+}
+
+export function test_borderBottomLeftRadius_property_is_synced_in_style_and_view() {
+    test_property_is_synced_in_style_and_view("borderBottomLeftRadius", 40);
+}
+
 export function test_marginLeft_property_is_synced_in_style_and_view() {
     test_property_is_synced_in_style_and_view("marginLeft", 10);
 }
@@ -364,9 +412,65 @@ export function test_setting_different_backgroundColor_triggers_property_change(
     TKUnit.assert(changed, "Property changed not triggered.");
 }
 
+export function test_setting_border_color_shorthand_property_sets_all_border_colors() {
+    let red = new color.Color("red");
+    let green = new color.Color("green");
+    let blue = new color.Color("blue");
+    let yellow = new color.Color("yellow");
+    test_border_color_shorthand_property("red", red, red, red, red);
+    test_border_color_shorthand_property("red green", red, green, red, green);
+    test_border_color_shorthand_property("red green blue", red, green, blue, green);
+    test_border_color_shorthand_property("red green blue yellow", red, green, blue, yellow);
+}
+
+function test_border_color_shorthand_property(short: string, top: color.Color, right: color.Color, bottom: color.Color, left: color.Color) {
+    var testView = new buttonModule.Button();
+    testView.style.borderColor = short;
+
+    TKUnit.assertEqual(testView.style.borderTopColor, top, "top");
+    TKUnit.assertEqual(testView.style.borderRightColor, right, "right");
+    TKUnit.assertEqual(testView.style.borderBottomColor, bottom, "bottom");
+    TKUnit.assertEqual(testView.style.borderLeftColor, left, "left");
+}
+
+export function test_setting_border_width_shorthand_property_sets_all_border_widths() {
+    test_border_width_shorthand_property("10", 10, 10, 10, 10);
+    test_border_width_shorthand_property("10 20", 10, 20, 10, 20);
+    test_border_width_shorthand_property("10 20 30", 10, 20, 30, 20);
+    test_border_width_shorthand_property("10 20 30 40", 10, 20, 30, 40);
+}
+
+function test_border_width_shorthand_property(short: string, top: number, right: number, bottom: number, left: number) {
+    var testView = new buttonModule.Button();
+    testView.style.borderWidth = short;
+
+    TKUnit.assertEqual(testView.style.borderTopWidth, top, "top");
+    TKUnit.assertEqual(testView.style.borderRightWidth, right, "right");
+    TKUnit.assertEqual(testView.style.borderBottomWidth, bottom, "bottom");
+    TKUnit.assertEqual(testView.style.borderLeftWidth, left, "left");
+}
+
+export function test_setting_border_radius_shorthand_property_sets_all_border_radii() {
+    test_border_radius_shorthand_property("10", 10, 10, 10, 10);
+    test_border_radius_shorthand_property("10 20", 10, 20, 10, 20);
+    test_border_radius_shorthand_property("10 20 30", 10, 20, 30, 20);
+    test_border_radius_shorthand_property("10 20 30 40", 10, 20, 30, 40);
+}
+
+function test_border_radius_shorthand_property(short: string, topLeft: number, topRight: number, bottomRight: number, bottomLeft: number) {
+    var testView = new buttonModule.Button();
+    testView.style.borderRadius = short;
+
+    TKUnit.assertEqual(testView.style.borderTopLeftRadius, topLeft, "topLeft");
+    TKUnit.assertEqual(testView.style.borderTopRightRadius, topRight, "topRight");
+    TKUnit.assertEqual(testView.style.borderBottomRightRadius, bottomRight, "bottomRight");
+    TKUnit.assertEqual(testView.style.borderBottomLeftRadius, bottomLeft, "bottomLeft");
+}
+
 export function test_setting_margin_shorthand_property_sets_all_margins() {
     test_margin_shorthand_property("10", 10, 10, 10, 10);
     test_margin_shorthand_property("10 20", 10, 20, 10, 20);
+    test_margin_shorthand_property("10 20 30", 10, 20, 30, 20);
     test_margin_shorthand_property("10 20 30 40", 10, 20, 30, 40);
 }
 
@@ -383,6 +487,7 @@ function test_margin_shorthand_property(short: string, top: number, right: numbe
 export function test_setting_padding_shorthand_property_sets_all_paddings() {
     test_padding_shorthand_property("10", 10, 10, 10, 10);
     test_padding_shorthand_property("10 20", 10, 20, 10, 20);
+    test_padding_shorthand_property("10 20 30", 10, 20, 30, 20);
     test_padding_shorthand_property("10 20 30 40", 10, 20, 30, 40);
 }
 
@@ -627,4 +732,61 @@ export var test_setting_button_textTransform_and_textDecoration_sets_native = fu
     testView.style.textDecoration = enums.TextDecoration.underline;
 
     executeTransformTest(testView, androidText, function (v) { return (<UIButton>v.ios).attributedTitleForState(UIControlState.Normal).string; });
-}
\ No newline at end of file
+}
+
+export function test_border_color() {
+    let testView = new buttonModule.Button();
+
+    let red = new color.Color("red");
+    testView.style.borderColor = red;
+    TKUnit.assertEqual(testView.style.borderColor, red, "all");
+    TKUnit.assertEqual(testView.style.borderTopColor, red, "top");
+    TKUnit.assertEqual(testView.style.borderRightColor, red, "right");
+    TKUnit.assertEqual(testView.style.borderBottomColor, red, "bottom");
+    TKUnit.assertEqual(testView.style.borderLeftColor, red, "left");
+    
+    let blue = new color.Color("blue");
+    let hex = blue.hex;
+    testView.style.borderColor = hex;
+    TKUnit.assertEqual(testView.style.borderColor, blue, "all");
+    TKUnit.assertEqual(testView.style.borderTopColor, blue, "top");
+    TKUnit.assertEqual(testView.style.borderRightColor, blue, "right");
+    TKUnit.assertEqual(testView.style.borderBottomColor, blue, "bottom");
+    TKUnit.assertEqual(testView.style.borderLeftColor, blue, "left");
+}
+
+export function test_border_width() {
+    let testView = new buttonModule.Button();
+    
+    testView.style.borderWidth = 10;
+    TKUnit.assertEqual(testView.style.borderWidth, 10, "all");
+    TKUnit.assertEqual(testView.style.borderTopWidth, 10, "top");
+    TKUnit.assertEqual(testView.style.borderRightWidth, 10, "right");
+    TKUnit.assertEqual(testView.style.borderBottomWidth, 10, "bottom");
+    TKUnit.assertEqual(testView.style.borderLeftWidth, 10, "left");
+
+    testView.style.borderWidth = "20";
+    TKUnit.assertEqual(testView.style.borderWidth, 20, "all");
+    TKUnit.assertEqual(testView.style.borderTopWidth, 20, "top");
+    TKUnit.assertEqual(testView.style.borderRightWidth, 20, "right");
+    TKUnit.assertEqual(testView.style.borderBottomWidth, 20, "bottom");
+    TKUnit.assertEqual(testView.style.borderLeftWidth, 20, "left");
+}
+
+export function test_border_radius() {
+    let testView = new buttonModule.Button();
+    
+    testView.style.borderRadius = 10;
+    TKUnit.assertEqual(testView.style.borderRadius, 10, "all");
+    TKUnit.assertEqual(testView.style.borderTopLeftRadius, 10, "top");
+    TKUnit.assertEqual(testView.style.borderTopRightRadius, 10, "right");
+    TKUnit.assertEqual(testView.style.borderBottomRightRadius, 10, "bottom");
+    TKUnit.assertEqual(testView.style.borderBottomLeftRadius, 10, "left");
+    
+    testView.style.borderRadius = "20";
+    TKUnit.assertEqual(testView.style.borderRadius, 20, "all");
+    TKUnit.assertEqual(testView.style.borderTopLeftRadius, 20, "top");
+    TKUnit.assertEqual(testView.style.borderTopRightRadius, 20, "right");
+    TKUnit.assertEqual(testView.style.borderBottomRightRadius, 20, "bottom");
+    TKUnit.assertEqual(testView.style.borderBottomLeftRadius, 20, "left");
+}
diff --git a/tests/app/ui/view/view-tests-common.ts b/tests/app/ui/view/view-tests-common.ts
index 7604ba6e5..002eea5b2 100644
--- a/tests/app/ui/view/view-tests-common.ts
+++ b/tests/app/ui/view/view-tests-common.ts
@@ -660,7 +660,7 @@ export var testBorderWidth = function () {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
         var lbl = <labelModule.Label>views[0];
         var expectedValue = lbl.borderWidth;
-        var actualValue = definition.getNativeBorderWidth(lbl);
+        var actualValue = definition.getUniformNativeBorderWidth(lbl);
         TKUnit.assertEqual(actualValue, expectedValue);
     });
 }
@@ -669,7 +669,7 @@ export var testCornerRadius = function () {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
         var lbl = <labelModule.Label>views[0];
         var expectedValue = lbl.borderRadius;
-        var actualValue = definition.getNativeCornerRadius(lbl);
+        var actualValue = definition.getUniformNativeCornerRadius(lbl);
         TKUnit.assertEqual(actualValue, expectedValue);
     });
 }
@@ -677,7 +677,7 @@ export var testCornerRadius = function () {
 export var testBorderColor = function () {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<viewModule.View>) {
         var lbl = <labelModule.Label>views[0];
-        TKUnit.assertEqual(definition.checkNativeBorderColor(lbl), true, "BorderColor not applied correctly!");
+        TKUnit.assertEqual(definition.checkUniformNativeBorderColor(lbl), true, "BorderColor not applied correctly!");
     });
 }
 
diff --git a/tests/app/ui/view/view-tests.android.ts b/tests/app/ui/view/view-tests.android.ts
index 9b639a1a4..c35186fb8 100644
--- a/tests/app/ui/view/view-tests.android.ts
+++ b/tests/app/ui/view/view-tests.android.ts
@@ -8,6 +8,7 @@ import stack = require("ui/layouts/stack-layout");
 import labelModule = require("ui/label");
 import frame = require("ui/frame");
 import trace = require("trace");
+import { Color } from "color";
 // enable the trace, it is disabled by default
 trace.enable();
 
@@ -267,22 +268,19 @@ export var test_StylePropertiesDefaultValuesCache = function () {
     helper.do_PageTest_WithStackLayout_AndButton(test);
 }
 
-export function getNativeBorderWidth(v: view.View): number {
+export function getUniformNativeBorderWidth(v: view.View): number {
     var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
-
-    return bkg ? bkg.getBorderWidth() : -1;
+    return bkg ? bkg.getUniformBorderWidth() : 0;
 }
 
-export function getNativeCornerRadius(v: view.View): number {
-    var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
-
-    return bkg ? bkg.getBorderRadius() : -1;
-}
-
-export function checkNativeBorderColor(v: view.View): boolean {
+export function checkUniformNativeBorderColor(v: view.View): boolean {
     var bkg = <org.nativescript.widgets.BorderDrawable>(<android.view.View>v.android).getBackground();
+    return bkg && bkg.getUniformBorderColor() === (<Color>v.borderColor).android;
+}
 
-    return v.borderColor && bkg && bkg.getBorderColor() === v.borderColor.android;
+export function getUniformNativeCornerRadius(v: view.View): number {
+    var bkg = <org.nativescript.widgets.BorderDrawable>v.android.getBackground();
+    return bkg ? bkg.getUniformBorderRadius() : 0
 }
 
 export function checkNativeBackgroundColor(v: view.View): boolean {
diff --git a/tests/app/ui/view/view-tests.d.ts b/tests/app/ui/view/view-tests.d.ts
index 90108ddd8..01ea244a7 100644
--- a/tests/app/ui/view/view-tests.d.ts
+++ b/tests/app/ui/view/view-tests.d.ts
@@ -1,11 +1,11 @@
 //@private
 import view = require("ui/core/view");
 
-export declare function getNativeBorderWidth(v: view.View): number;
+export declare function getUniformNativeBorderWidth(v: view.View): number;
 
-export declare function getNativeCornerRadius(v: view.View): number;
+export declare function getUniformNativeCornerRadius(v: view.View): number;
 
-export declare function checkNativeBorderColor(v: view.View): boolean
+export declare function checkUniformNativeBorderColor(v: view.View): boolean
 
 export declare function checkNativeBackgroundColor(v: view.View): boolean;
 
diff --git a/tests/app/ui/view/view-tests.ios.ts b/tests/app/ui/view/view-tests.ios.ts
index 5d1545191..29cfb6463 100644
--- a/tests/app/ui/view/view-tests.ios.ts
+++ b/tests/app/ui/view/view-tests.ios.ts
@@ -8,16 +8,20 @@ import button = require("ui/button");
 
 global.moduleMerge(commonTests, exports);
 
-export function getNativeBorderWidth(v: view.View): number {
+export function getUniformNativeBorderWidth(v: view.View): number {
     return (<UIView>v.ios).layer.borderWidth;
 }
 
-export function getNativeCornerRadius(v: view.View): number {
-    return (<UIView>v.ios).layer.cornerRadius;
+export function checkUniformNativeBorderColor(v: view.View): boolean {
+    if (v.borderColor instanceof color.Color){
+        return (<UIView>v.ios).layer.borderColor === (<color.Color>v.borderColor).ios.CGColor;
+    }
+
+    return undefined;
 }
 
-export function checkNativeBorderColor(v: view.View): boolean {
-    return v.borderColor && (<UIView>v.ios).layer.borderColor === v.borderColor.ios.CGColor;
+export function getUniformNativeCornerRadius(v: view.View): number {
+    return (<UIView>v.ios).layer.cornerRadius;
 }
 
 export function checkNativeBackgroundColor(v: view.View): boolean {
diff --git a/tns-core-modules/color/color-common.ts b/tns-core-modules/color/color-common.ts
index 9ad179625..68a17c402 100644
--- a/tns-core-modules/color/color-common.ts
+++ b/tns-core-modules/color/color-common.ts
@@ -167,6 +167,10 @@ export class Color implements definition.Color {
         }
         return hexStr;
     }
+
+    public toString(): string {
+        return this.hex;
+    }
 }
 
 function isRgbOrRgba(value: string): boolean {
diff --git a/tns-core-modules/org.nativescript.widgets.d.ts b/tns-core-modules/org.nativescript.widgets.d.ts
index 54a32c374..a69d53943 100644
--- a/tns-core-modules/org.nativescript.widgets.d.ts
+++ b/tns-core-modules/org.nativescript.widgets.d.ts
@@ -4,10 +4,23 @@
             export class BorderDrawable extends android.graphics.drawable.ColorDrawable {
                 constructor(density: number);
                 public refresh(
-                    borderWidth: number,
-                    borderColor: number,
-                    borderRadius: number,
+                    borderTopColor: number,
+                    borderRightColor: number,
+                    borderBottomColor: number,
+                    borderLeftColor: number,
+                    
+                    borderTopWidth: number,
+                    borderRightWidth: number,
+                    borderBottomWidth: number,
+                    borderLeftWidth: number,
+                    
+                    borderTopLeftRadius: number,
+                    borderTopRightRadius: number,
+                    borderBottomRightRadius: number,
+                    borderBottomLeftRadius: number,
+                    
                     clipPath: string,
+                    
                     backgroundColor: number,
                     backgroundImage: android.graphics.Bitmap,
                     backgroundRepeat: string,
@@ -16,15 +29,37 @@
                     backgroundSize: string,
                     backgroundSizeParsedCSSValues: native.Array<CSSValue>
                 );
-                public getBorderWidth(): number;
-                public getBorderColor(): number;
-                public getBorderRadius(): number;
+                
+                public getBorderTopColor(): number;
+                public getBorderRightColor(): number;
+                public getBorderBottomColor(): number;
+                public getBorderLeftColor(): number;
+                public getUniformBorderColor(): number;
+                
+                public getBorderTopWidth(): number;
+                public getBorderRightWidth(): number;
+                public getBorderBottomWidth(): number;
+                public getBorderLeftWidth(): number;
+                public getUniformBorderWidth(): number;
+                
+                public getBorderTopLeftRadius(): number;
+                public getBorderTopRightRadius(): number;
+                public getBorderBottomRightRadius(): number;
+                public getBorderBottomLeftRadius(): number;
+                public getUniformBorderRadius(): number;
+                
                 public getClipPath(): string;
+                
                 public getBackgroundColor(): number;
                 public getBackgroundImage(): android.graphics.Bitmap;
                 public getBackgroundRepeat(): string;
                 public getBackgroundPosition(): string;
                 public getBackgroundSize(): string;
+                
+                public hasUniformBorderColor(): boolean;
+                public hasUniformBorderWidth(): boolean;
+                public hasUniformBorderRadius(): boolean;
+                public hasUniformBorder(): boolean;
             }
             
             export class CSSValue {
@@ -183,11 +218,6 @@
 
             export class ImageView extends android.widget.ImageView {
                 constructor(context: android.content.Context);
-                getCornerRadius(): number;
-                setCornerRadius(radius: number): void;
-
-                getBorderWidth(): number;
-                setBorderWidth(width: number): void;
             }
 
             export class TabLayout extends android.widget.HorizontalScrollView {
diff --git a/tns-core-modules/ui/border/border.d.ts b/tns-core-modules/ui/border/border.d.ts
index b72ae065e..8e81abba6 100644
--- a/tns-core-modules/ui/border/border.d.ts
+++ b/tns-core-modules/ui/border/border.d.ts
@@ -17,11 +17,11 @@ declare module "ui/border" {
         /**
          * Gets or sets the border width of the border component.
          */
-        borderWidth: number;
+        borderWidth: string | number;
 
         /**
          * Gets or sets the border color of the border component.
          */
-        borderColor: Color;
+        borderColor: string | Color;
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/border/border.ts b/tns-core-modules/ui/border/border.ts
index 3dfbce78c..0a0b0c649 100644
--- a/tns-core-modules/ui/border/border.ts
+++ b/tns-core-modules/ui/border/border.ts
@@ -2,11 +2,15 @@
 import contentView = require("ui/content-view");
 import viewModule = require("ui/core/view");
 import utils = require("utils/utils");
+import types = require("utils/types");
 
 @Deprecated
 export class Border extends contentView.ContentView implements definition.Border {
     get cornerRadius(): number {
-        return this.borderRadius;
+        if (types.isNumber(this.borderRadius)){
+            return <number>this.borderRadius;
+        }
+        return 0;
     }
     set cornerRadius(value: number) {
         this.borderRadius = value;
@@ -20,7 +24,11 @@ export class Border extends contentView.ContentView implements definition.Border
         var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
 
         var density = utils.layout.getDisplayDensity();
-        var borderSize = (2 * this.borderWidth) * density;
+        let borderWidth = 0;
+        if (types.isNumber(this.borderWidth)){
+            borderWidth = <number>this.borderWidth;
+        }
+        var borderSize = (2 * borderWidth) * density;
 
         var result = viewModule.View.measureChild(this, this.layoutView,
             utils.layout.makeMeasureSpec(width - borderSize, widthMode),
@@ -34,7 +42,11 @@ export class Border extends contentView.ContentView implements definition.Border
 
     public onLayout(left: number, top: number, right: number, bottom: number): void {
         var density = utils.layout.getDisplayDensity();
-        var borderSize = this.borderWidth * density;
+        let borderWidth = 0;
+        if (types.isNumber(this.borderWidth)){
+            borderWidth = <number>this.borderWidth;
+        }
+        var borderSize = borderWidth * density;
         viewModule.View.layoutChild(this, this.layoutView, borderSize, borderSize, right - left - borderSize, bottom - top - borderSize);
     }
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/button/button.ios.ts b/tns-core-modules/ui/button/button.ios.ts
index 20c8e87e1..3913011b2 100644
--- a/tns-core-modules/ui/button/button.ios.ts
+++ b/tns-core-modules/ui/button/button.ios.ts
@@ -165,12 +165,81 @@ export class ButtonStyler implements style.Styler {
         }
     }
 
+    // Borders
+    private static setBorderTopWidthProperty(view: view.View, newValue: number) {
+        ButtonStyler.setNativeBorderTopWidth(view, newValue);
+    }
+
+    private static resetBorderTopWidthProperty(view: view.View, nativeValue: number) {
+        ButtonStyler.setNativeBorderTopWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderTopWidth(view: view.View, newValue: number) {
+        let nativeButton = <UIButton>view._nativeView; 
+        let top = view.style.paddingTop + newValue;
+        let left = nativeButton.contentEdgeInsets.left;
+        let bottom = nativeButton.contentEdgeInsets.bottom;
+        let right = nativeButton.contentEdgeInsets.right;
+        nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static setBorderRightWidthProperty(view: view.View, newValue: number) {
+        ButtonStyler.setNativeBorderRightWidth(view, newValue);
+    }
+
+    private static resetBorderRightWidthProperty(view: view.View, nativeValue: number) {
+        ButtonStyler.setNativeBorderRightWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderRightWidth(view: view.View, newValue: number) {
+        let nativeButton = <UIButton>view._nativeView; 
+        let top = nativeButton.contentEdgeInsets.top;
+        let left = nativeButton.contentEdgeInsets.left;
+        let bottom = nativeButton.contentEdgeInsets.bottom;
+        let right = view.style.paddingRight + newValue;
+        nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static setBorderBottomWidthProperty(view: view.View, newValue: number) {
+        ButtonStyler.setNativeBorderBottomWidth(view, newValue);
+    }
+
+    private static resetBorderBottomWidthProperty(view: view.View, nativeValue: number) {
+        ButtonStyler.setNativeBorderBottomWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderBottomWidth(view: view.View, newValue: number) {
+        let nativeButton = <UIButton>view._nativeView; 
+        let top = nativeButton.contentEdgeInsets.top;
+        let left = nativeButton.contentEdgeInsets.left;
+        let bottom = view.style.paddingBottom + newValue;
+        let right = nativeButton.contentEdgeInsets.right;
+        nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static setBorderLeftWidthProperty(view: view.View, newValue: number) {
+        ButtonStyler.setNativeBorderLeftWidth(view, newValue);
+    }
+
+    private static resetBorderLeftWidthProperty(view: view.View, nativeValue: number) {
+        ButtonStyler.setNativeBorderLeftWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderLeftWidth(view: view.View, newValue: number) {
+        let nativeButton = <UIButton>view._nativeView; 
+        let top = nativeButton.contentEdgeInsets.top;
+        let left = view.style.paddingLeft + newValue;
+        let bottom = nativeButton.contentEdgeInsets.bottom;
+        let right = nativeButton.contentEdgeInsets.right;
+        nativeButton.contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
     // Padding
     private static setPaddingProperty(view: view.View, newValue: any) {
-        var top = newValue.top + view.borderWidth;
-        var left = newValue.left + view.borderWidth;
-        var bottom = newValue.bottom + view.borderWidth;
-        var right = newValue.right + view.borderWidth;
+        var top = newValue.top + view.borderTopWidth;
+        var left = newValue.left + view.borderLeftWidth;
+        var bottom = newValue.bottom + view.borderBottomWidth;
+        var right = newValue.right + view.borderRightWidth;
         (<UIButton>view._nativeView).contentEdgeInsets = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
     }
 
@@ -230,6 +299,19 @@ export class ButtonStyler implements style.Styler {
             ButtonStyler.resetTextAlignmentProperty,
             ButtonStyler.getNativeTextAlignmentValue), "Button");
 
+        style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
+            ButtonStyler.setBorderTopWidthProperty,
+            ButtonStyler.resetBorderTopWidthProperty), "Button");
+        style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
+            ButtonStyler.setBorderRightWidthProperty,
+            ButtonStyler.resetBorderRightWidthProperty), "Button");
+        style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
+            ButtonStyler.setBorderBottomWidthProperty,
+            ButtonStyler.resetBorderBottomWidthProperty), "Button");
+        style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
+            ButtonStyler.setBorderLeftWidthProperty,
+            ButtonStyler.resetBorderLeftWidthProperty), "Button");
+
         style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
             ButtonStyler.setPaddingProperty,
             ButtonStyler.resetPaddingProperty), "Button");
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 20e31d668..6e89a472f 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -279,25 +279,109 @@ export class View extends ProxyObject implements definition.View {
     }
 
     // START Style property shortcuts
-    get borderRadius(): number {
-        return this.style.borderRadius;
+    get borderColor(): string | color.Color {
+        return this.style.borderColor;
     }
-    set borderRadius(value: number) {
-        this.style.borderRadius = value;
+    set borderColor(value: string | color.Color) {
+        this.style.borderColor = value;
     }
 
-    get borderWidth(): number {
+    get borderTopColor(): color.Color {
+        return this.style.borderTopColor;
+    }
+    set borderTopColor(value: color.Color) {
+        this.style.borderTopColor = value;
+    }
+
+    get borderRightColor(): color.Color {
+        return this.style.borderRightColor;
+    }
+    set borderRightColor(value: color.Color) {
+        this.style.borderRightColor = value;
+    }
+
+    get borderBottomColor(): color.Color {
+        return this.style.borderBottomColor;
+    }
+    set borderBottomColor(value: color.Color) {
+        this.style.borderBottomColor = value;
+    }
+
+    get borderLeftColor(): color.Color {
+        return this.style.borderLeftColor;
+    }
+    set borderLeftColor(value: color.Color) {
+        this.style.borderLeftColor = value;
+    }
+
+    get borderWidth(): string | number {
         return this.style.borderWidth;
     }
-    set borderWidth(value: number) {
+    set borderWidth(value: string | number) {
         this.style.borderWidth = value;
     }
 
-    get borderColor(): color.Color {
-        return this.style.borderColor;
+    get borderTopWidth(): number {
+        return this.style.borderTopWidth;
     }
-    set borderColor(value: color.Color) {
-        this.style.borderColor = value;
+    set borderTopWidth(value: number) {
+        this.style.borderTopWidth = value;
+    }
+
+    get borderRightWidth(): number {
+        return this.style.borderRightWidth;
+    }
+    set borderRightWidth(value: number) {
+        this.style.borderRightWidth = value;
+    }
+
+    get borderBottomWidth(): number {
+        return this.style.borderBottomWidth;
+    }
+    set borderBottomWidth(value: number) {
+        this.style.borderBottomWidth = value;
+    }
+
+    get borderLeftWidth(): number {
+        return this.style.borderLeftWidth;
+    }
+    set borderLeftWidth(value: number) {
+        this.style.borderLeftWidth = value;
+    }
+
+    get borderRadius(): string | number {
+        return this.style.borderRadius;
+    }
+    set borderRadius(value: string | number) {
+        this.style.borderRadius = value;
+    }
+
+    get borderTopLeftRadius(): number {
+        return this.style.borderTopLeftRadius;
+    }
+    set borderTopLeftRadius(value: number) {
+        this.style.borderTopLeftRadius = value;
+    }
+
+    get borderTopRightRadius(): number {
+        return this.style.borderTopRightRadius;
+    }
+    set borderTopRightRadius(value: number) {
+        this.style.borderTopRightRadius = value;
+    }
+
+    get borderBottomRightRadius(): number {
+        return this.style.borderBottomRightRadius;
+    }
+    set borderBottomRightRadius(value: number) {
+        this.style.borderBottomRightRadius = value;
+    }
+
+    get borderBottomLeftRadius(): number {
+        return this.style.borderBottomLeftRadius;
+    }
+    set borderBottomLeftRadius(value: number) {
+        this.style.borderBottomLeftRadius = value;
     }
 
     get color(): color.Color {
diff --git a/tns-core-modules/ui/core/view.android.ts b/tns-core-modules/ui/core/view.android.ts
index 4cf5fa29c..f14c88a48 100644
--- a/tns-core-modules/ui/core/view.android.ts
+++ b/tns-core-modules/ui/core/view.android.ts
@@ -679,7 +679,7 @@ export class ViewStyler implements style.Styler {
     private static setNativePaddingLeft(view: View, value: number): void {
         let nativeView = view._nativeView;
         let density = utils.layout.getDisplayDensity();
-        let left = (value + view.borderWidth) * density;
+        let left = (value + view.borderLeftWidth) * density;
         let top = nativeView.getPaddingTop();
         let right = nativeView.getPaddingRight();
         let bottom = nativeView.getPaddingBottom();
@@ -690,7 +690,7 @@ export class ViewStyler implements style.Styler {
         let nativeView = view._nativeView;
         let density = utils.layout.getDisplayDensity();
         let left = nativeView.getPaddingLeft();
-        let top = (value + view.borderWidth) * density;
+        let top = (value + view.borderTopWidth) * density;
         let right = nativeView.getPaddingRight();
         let bottom = nativeView.getPaddingBottom();
         nativeView.setPadding(left, top, right, bottom);
@@ -701,7 +701,7 @@ export class ViewStyler implements style.Styler {
         let density = utils.layout.getDisplayDensity();
         let left = nativeView.getPaddingLeft();
         let top = nativeView.getPaddingTop();
-        let right = (value + view.borderWidth) * density;
+        let right = (value + view.borderRightWidth) * density;
         let bottom = nativeView.getPaddingBottom();
         nativeView.setPadding(left, top, right, bottom);
     }
@@ -712,7 +712,7 @@ export class ViewStyler implements style.Styler {
         let left = nativeView.getPaddingLeft();
         let top = nativeView.getPaddingTop();
         let right = nativeView.getPaddingRight();
-        let bottom = (value + view.borderWidth) * density;
+        let bottom = (value + view.borderBottomWidth) * density;
         nativeView.setPadding(left, top, right, bottom);
     }
 
@@ -801,11 +801,9 @@ export class ViewStyler implements style.Styler {
 
         // Use the same handler for all background/border properties
         // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
-        var backgroundAndBorderHandler = new style.StylePropertyChangedHandler(
+        style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setBackgroundAndBorder,
-            ViewStyler.resetBackgroundAndBorder);
-
-        style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler);
+            ViewStyler.resetBackgroundAndBorder));
 
         style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setNativeLayoutParamsProperty,
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index a9672de51..f93142583 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -73,19 +73,79 @@ declare module "ui/core/view" {
      */
     export class View extends proxy.ProxyObject implements ApplyXmlAttributes {
         /**
-         * Gets or sets the corner radius of the view.
+         * Gets or sets the border color of the view.
          */
-        borderRadius: number;
+        borderColor: string | color.Color;
+        
+        /**
+         * Gets or sets the top border color of the view.
+         */
+        borderTopColor: color.Color;
+        
+        /**
+         * Gets or sets the right border color of the view.
+         */
+        borderRightColor: color.Color;
+        
+        /**
+         * Gets or sets the bottom border color of the view.
+         */
+        borderBottomColor: color.Color;
+        
+        /**
+         * Gets or sets the left border color of the view.
+         */
+        borderLeftColor: color.Color;
 
         /**
          * Gets or sets the border width of the view.
          */
-        borderWidth: number;
+        borderWidth: string | number;
 
         /**
-         * Gets or sets the border color of the view.
+         * Gets or sets the top border width of the view.
          */
-        borderColor: color.Color;
+        borderTopWidth: number;
+
+        /**
+         * Gets or sets the right border width of the view.
+         */
+        borderRightWidth: number;
+
+        /**
+         * Gets or sets the bottom border width of the view.
+         */
+        borderBottomWidth: number;
+
+        /**
+         * Gets or sets the left border width of the view.
+         */
+        borderLeftWidth: number;
+
+        /**
+         * Gets or sets the border radius of the view.
+         */
+        borderRadius: string | number;
+
+        /**
+         * Gets or sets the top left border radius of the view.
+         */
+        borderTopLeftRadius: number;
+
+        /**
+         * Gets or sets the top right border radius of the view.
+         */
+        borderTopRightRadius: number;
+
+        /**
+         * Gets or sets the bottom right border radius of the view.
+         */
+        borderBottomRightRadius: number;
+
+        /**
+         * Gets or sets the bottom left border radius of the view.
+         */
+        borderBottomLeftRadius: number;
 
         /**
          * Gets or sets the automation text of the view.
diff --git a/tns-core-modules/ui/core/view.ios.ts b/tns-core-modules/ui/core/view.ios.ts
index a02d05873..06be5a1dc 100644
--- a/tns-core-modules/ui/core/view.ios.ts
+++ b/tns-core-modules/ui/core/view.ios.ts
@@ -9,13 +9,6 @@ import style = require("ui/styling/style");
 import enums = require("ui/enums");
 import * as backgroundModule from "ui/styling/background";
 
-var background: typeof backgroundModule;
-function ensureBackground() {
-    if (!background) {
-        background = require("ui/styling/background");
-    }
-}
-
 global.moduleMerge(viewCommon, exports);
 
 function onAutomationTextPropertyChanged(data: dependencyObservable.PropertyChangeData) {
@@ -382,12 +375,12 @@ export class ViewStyler implements style.Styler {
     private static setBackgroundInternalProperty(view: View, newValue: any) {
         var nativeView: UIView = <UIView>view._nativeView;
         if (nativeView) {
-            ensureBackground();
             var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
             if (!updateSuspended) {
                 CATransaction.begin();
             }
-            nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
+            nativeView.backgroundColor = backgroundModule.ios.createBackgroundUIColor(view);
+            
             if (!updateSuspended) {
                 CATransaction.commit();
             }
@@ -446,68 +439,7 @@ export class ViewStyler implements style.Styler {
             return nativeView.alpha = 1.0;
         }
     }
-
-    // Border width methods
-    private static setBorderWidthProperty(view: View, newValue: any) {
-        if (view._nativeView instanceof UIView) {
-            (<UIView>view._nativeView).layer.borderWidth = newValue;
-        }
-    }
-
-    private static resetBorderWidthProperty(view: View, nativeValue: any) {
-        if (view._nativeView instanceof UIView) {
-            (<UIView>view._nativeView).layer.borderWidth = nativeValue;
-        }
-    }
-
-    private static getBorderWidthProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            return (<UIView>view._nativeView).layer.borderWidth;
-        }
-        return 0;
-    }
-
-    // Border color methods
-    private static setBorderColorProperty(view: View, newValue: any) {
-        if (view._nativeView instanceof UIView && newValue instanceof UIColor) {
-            (<UIView>view._nativeView).layer.borderColor = (<UIColor>newValue).CGColor;
-        }
-    }
-
-    private static resetBorderColorProperty(view: View, nativeValue: any) {
-        if (view._nativeView instanceof UIView && nativeValue instanceof UIColor) {
-            (<UIView>view._nativeView).layer.borderColor = nativeValue;
-        }
-    }
-
-    private static getBorderColorProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            return (<UIView>view._nativeView).layer.borderColor;
-        }
-        return undefined;
-    }
-
-    // Border radius methods
-    private static setBorderRadiusProperty(view: View, newValue: any) {
-        if (view._nativeView instanceof UIView) {
-            (<UIView>view._nativeView).layer.cornerRadius = newValue;
-            (<UIView>view._nativeView).clipsToBounds = true;
-        }
-    }
-
-    private static resetBorderRadiusProperty(view: View, nativeValue: any) {
-        if (view._nativeView instanceof UIView) {
-            (<UIView>view._nativeView).layer.cornerRadius = nativeValue;
-        }
-    }
-
-    private static getBorderRadiusProperty(view: View): any {
-        if (view._nativeView instanceof UIView) {
-            return (<UIView>view._nativeView).layer.cornerRadius;
-        }
-        return 0;
-    }
-
+    
     // Rotate
     private static setRotateProperty(view: View, newValue: any) {
         view._updateNativeTransform();
@@ -606,40 +538,12 @@ export class ViewStyler implements style.Styler {
         return view.ios.layer.zPosition;
     }
 
-    // Clip-path methods
-    private static setClipPathProperty(view: View, newValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            ensureBackground();
-            var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
-            if (!updateSuspended) {
-                CATransaction.begin();
-            }
-            nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
-            if (!updateSuspended) {
-                CATransaction.commit();
-            }
-        }
-    }
-
-    private static resetClipPathProperty(view: View, nativeValue: any) {
-        var nativeView: UIView = <UIView>view._nativeView;
-        if (nativeView) {
-            // TODO: Check how to reset.
-        }
-    }
-
     public static registerHandlers() {
-
         style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setBackgroundInternalProperty,
             ViewStyler.resetBackgroundInternalProperty,
             ViewStyler.getNativeBackgroundInternalValue));
 
-        style.registerHandler(style.clipPathProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setClipPathProperty,
-            ViewStyler.resetClipPathProperty));
-
         style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setVisibilityProperty,
             ViewStyler.resetVisibilityProperty));
@@ -647,22 +551,6 @@ export class ViewStyler implements style.Styler {
         style.registerHandler(style.opacityProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setOpacityProperty,
             ViewStyler.resetOpacityProperty));
-
-        style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setBorderWidthProperty,
-            ViewStyler.resetBorderWidthProperty,
-            ViewStyler.getBorderWidthProperty));
-
-        style.registerHandler(style.borderColorProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setBorderColorProperty,
-            ViewStyler.resetBorderColorProperty,
-            ViewStyler.getBorderColorProperty));
-
-        style.registerHandler(style.borderRadiusProperty, new style.StylePropertyChangedHandler(
-            ViewStyler.setBorderRadiusProperty,
-            ViewStyler.resetBorderRadiusProperty,
-            ViewStyler.getBorderRadiusProperty));
-
         style.registerHandler(style.rotateProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setRotateProperty,
             ViewStyler.resetRotateProperty,
@@ -695,4 +583,4 @@ export class ViewStyler implements style.Styler {
     }
 }
 
-ViewStyler.registerHandlers();
+ViewStyler.registerHandlers();
\ No newline at end of file
diff --git a/tns-core-modules/ui/image/image.android.ts b/tns-core-modules/ui/image/image.android.ts
index 51a33b189..d15c2ee26 100644
--- a/tns-core-modules/ui/image/image.android.ts
+++ b/tns-core-modules/ui/image/image.android.ts
@@ -71,43 +71,6 @@ export class Image extends imageCommon.Image {
 }
 
 export class ImageStyler implements style.Styler {
-    // Corner radius
-    private static setBorderRadiusProperty(v: view.View, newValue: any, defaultValue?: any) {
-        if (!v._nativeView) {
-            return;
-        }
-        var val = Math.round(newValue * utils.layout.getDisplayDensity());
-        (<org.nativescript.widgets.ImageView>v._nativeView).setCornerRadius(val);
-        background.ad.onBackgroundOrBorderPropertyChanged(v);
-    }
-
-    private static resetBorderRadiusProperty(v: view.View, nativeValue: any) {
-        if (!v._nativeView) {
-            return;
-        }
-        (<org.nativescript.widgets.ImageView>v._nativeView).setCornerRadius(0);
-        background.ad.onBackgroundOrBorderPropertyChanged(v);
-    }
-
-    // Border width
-    private static setBorderWidthProperty(v: view.View, newValue: any, defaultValue?: any) {
-        if (!v._nativeView) {
-            return;
-        }
-
-        var val = Math.round(newValue * utils.layout.getDisplayDensity());
-        (<org.nativescript.widgets.ImageView>v._nativeView).setBorderWidth(val);
-        background.ad.onBackgroundOrBorderPropertyChanged(v);
-    }
-
-    private static resetBorderWidthProperty(v: view.View, nativeValue: any) {
-        if (!v._nativeView) {
-            return;
-        }
-        (<org.nativescript.widgets.ImageView>v._nativeView).setBorderWidth(0);
-        background.ad.onBackgroundOrBorderPropertyChanged(v);
-    }
-
     // tint color
     private static setTintColorProperty(view: view.View, newValue: any) {
         var imageView = <org.nativescript.widgets.ImageView>view._nativeView;
@@ -120,17 +83,6 @@ export class ImageStyler implements style.Styler {
     }
 
     public static registerHandlers() {
-        // Use the same handler for all background/border properties
-        // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
-
-        style.registerHandler(style.borderRadiusProperty, new style.StylePropertyChangedHandler(
-            ImageStyler.setBorderRadiusProperty,
-            ImageStyler.resetBorderRadiusProperty), "Image");
-
-        style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
-            ImageStyler.setBorderWidthProperty,
-            ImageStyler.resetBorderWidthProperty), "Image");
-
         style.registerHandler(style.tintColorProperty, new style.StylePropertyChangedHandler(
             ImageStyler.setTintColorProperty,
             ImageStyler.resetTintColorProperty), "Image");
diff --git a/tns-core-modules/ui/label/label.ios.ts b/tns-core-modules/ui/label/label.ios.ts
index dbcf2ee35..9a6cb6146 100644
--- a/tns-core-modules/ui/label/label.ios.ts
+++ b/tns-core-modules/ui/label/label.ios.ts
@@ -126,28 +126,114 @@ export class LabelStyler implements style.Styler {
         return undefined;
     }
 
-    private static setBorderWidthProperty(view: View, newValue: number) {
-        LabelStyler.setNativeBorderWidth(view, newValue);
+    private static setBorderTopWidthProperty(view: View, newValue: number) {
+        LabelStyler.setNativeBorderTopWidth(view, newValue);
     }
 
-    private static resetBorderWidthProperty(view: View, nativeValue: number) {
-        LabelStyler.setNativeBorderWidth(view, nativeValue);
+    private static resetBorderTopWidthProperty(view: View, nativeValue: number) {
+        LabelStyler.setNativeBorderTopWidth(view, nativeValue);
     }
 
-    private static setNativeBorderWidth(view: View, newValue: number) {
+    private static setNativeBorderTopWidth(view: View, newValue: number) {
         let nativeView = <UIView>view._nativeView;
-        if (nativeView instanceof UIView) {
-            nativeView.layer.borderWidth = newValue;
-        }
         if (nativeView instanceof TNSLabel) {
-            nativeView.borderThickness = { top: newValue, left: newValue, bottom: newValue, right: newValue };
+            nativeView.borderThickness = { 
+                top: newValue, 
+                right: nativeView.borderThickness.right, 
+                bottom: nativeView.borderThickness.bottom, 
+                left: nativeView.borderThickness.left
+            };
         }
     }
 
-    private static getBorderWidthProperty(view: View): number {
+    private static getBorderTopWidthProperty(view: View): number {
         let nativeView = <UIView>view._nativeView;
-        if (nativeView instanceof UIView) {
-            return nativeView.layer.borderWidth;
+        if (nativeView instanceof TNSLabel) {
+            return nativeView.borderThickness.top;
+        }
+        return 0;
+    }
+
+    private static setBorderRightWidthProperty(view: View, newValue: number) {
+        LabelStyler.setNativeBorderRightWidth(view, newValue);
+    }
+
+    private static resetBorderRightWidthProperty(view: View, nativeValue: number) {
+        LabelStyler.setNativeBorderRightWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderRightWidth(view: View, newValue: number) {
+        let nativeView = <UIView>view._nativeView;
+        if (nativeView instanceof TNSLabel) {
+            nativeView.borderThickness = { 
+                top: nativeView.borderThickness.top, 
+                right: newValue, 
+                bottom: nativeView.borderThickness.bottom, 
+                left: nativeView.borderThickness.left
+            };
+        }
+    }
+
+    private static getBorderRightWidthProperty(view: View): number {
+        let nativeView = <UIView>view._nativeView;
+        if (nativeView instanceof TNSLabel) {
+            return nativeView.borderThickness.right;
+        }
+        return 0;
+    }
+
+    private static setBorderBottomWidthProperty(view: View, newValue: number) {
+        LabelStyler.setNativeBorderBottomWidth(view, newValue);
+    }
+
+    private static resetBorderBottomWidthProperty(view: View, nativeValue: number) {
+        LabelStyler.setNativeBorderBottomWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderBottomWidth(view: View, newValue: number) {
+        let nativeView = <UIView>view._nativeView;
+        if (nativeView instanceof TNSLabel) {
+            nativeView.borderThickness = { 
+                top: nativeView.borderThickness.top, 
+                right: nativeView.borderThickness.right, 
+                bottom: newValue, 
+                left: nativeView.borderThickness.left
+            };
+        }
+    }
+
+    private static getBorderBottomWidthProperty(view: View): number {
+        let nativeView = <UIView>view._nativeView;
+        if (nativeView instanceof TNSLabel) {
+            return nativeView.borderThickness.bottom;
+        }
+        return 0;
+    }
+
+    private static setBorderLeftWidthProperty(view: View, newValue: number) {
+        LabelStyler.setNativeBorderLeftWidth(view, newValue);
+    }
+
+    private static resetBorderLeftWidthProperty(view: View, nativeValue: number) {
+        LabelStyler.setNativeBorderLeftWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderLeftWidth(view: View, newValue: number) {
+        let nativeView = <UIView>view._nativeView;
+        if (nativeView instanceof TNSLabel) {
+            nativeView.borderThickness = { 
+                top: nativeView.borderThickness.top, 
+                right: nativeView.borderThickness.right, 
+                bottom: nativeView.borderThickness.bottom, 
+                left: newValue
+            };
+        }
+    }
+
+    private static getBorderLeftWidthProperty(view: View): number {
+        let nativeView = <UIView>view._nativeView;
+        if (nativeView instanceof TNSLabel) {
+            return nativeView.borderThickness.left;
         }
         return 0;
     }
@@ -180,10 +266,24 @@ export class LabelStyler implements style.Styler {
             LabelStyler.setBackgroundInternalProperty,
             LabelStyler.resetBackgroundInternalProperty,
             LabelStyler.getNativeBackgroundInternalValue), "Label");
-        style.registerHandler(style.borderWidthProperty, new style.StylePropertyChangedHandler(
-            LabelStyler.setBorderWidthProperty,
-            LabelStyler.resetBorderWidthProperty,
-            LabelStyler.getBorderWidthProperty), "Label");
+        
+        style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
+            LabelStyler.setBorderTopWidthProperty,
+            LabelStyler.resetBorderTopWidthProperty,
+            LabelStyler.getBorderTopWidthProperty), "Label");
+        style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
+            LabelStyler.setBorderRightWidthProperty,
+            LabelStyler.resetBorderRightWidthProperty,
+            LabelStyler.getBorderRightWidthProperty), "Label");
+        style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
+            LabelStyler.setBorderBottomWidthProperty,
+            LabelStyler.resetBorderBottomWidthProperty,
+            LabelStyler.getBorderBottomWidthProperty), "Label");
+        style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
+            LabelStyler.setBorderLeftWidthProperty,
+            LabelStyler.resetBorderLeftWidthProperty,
+            LabelStyler.getBorderLeftWidthProperty), "Label");
+
         style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
             LabelStyler.setPaddingProperty,
             LabelStyler.resetPaddingProperty,
diff --git a/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts b/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
index 2722dbe4f..a489716cf 100644
--- a/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
@@ -36,8 +36,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
             measureHeight = Math.max(measureHeight, AbsoluteLayout.getTop(child) * density + childSize.measuredHeight);
         });
 
-        measureWidth += (this.paddingLeft + this.paddingRight) * density;
-        measureHeight += (this.paddingTop + this.paddingBottom) * density;
+        measureWidth += (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
+        measureHeight += (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
 
         measureWidth = Math.max(measureWidth, this.minWidth * density);
         measureHeight = Math.max(measureHeight, this.minHeight * density);
@@ -58,8 +58,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
             let childWidth = child.getMeasuredWidth();
             let childHeight = child.getMeasuredHeight();
 
-            let childLeft = (this.paddingLeft + AbsoluteLayout.getLeft(child)) * density;
-            let childTop = (this.paddingTop + AbsoluteLayout.getTop(child)) * density;
+            let childLeft = (this.borderLeftWidth + this.paddingLeft + AbsoluteLayout.getLeft(child)) * density;
+            let childTop = (this.borderTopWidth + this.paddingTop + AbsoluteLayout.getTop(child)) * density;
             let childRight = childLeft + childWidth + (lp.leftMargin + lp.rightMargin) * density;
             let childBottom = childTop + childHeight + (lp.topMargin + lp.bottomMargin) * density;
 
diff --git a/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts b/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
index 9088dec79..f53be67bd 100644
--- a/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/dock-layout/dock-layout.ios.ts
@@ -27,8 +27,8 @@ export class DockLayout extends common.DockLayout {
 
         var density = utils.layout.getDisplayDensity();
 
-        var remainingWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : width - ((this.paddingLeft + this.paddingRight) * density);
-        var remainingHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : height - ((this.paddingTop + this.paddingBottom) * density);
+        var remainingWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : width - ((this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density);
+        var remainingHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : height - ((this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density);
 
         var tempHeight: number = 0;
         var tempWidth: number = 0;
@@ -69,8 +69,8 @@ export class DockLayout extends common.DockLayout {
             }
         });
 
-        measureWidth += (this.paddingLeft + this.paddingRight) * density;
-        measureHeight += (this.paddingTop + this.paddingBottom) * density;
+        measureWidth += (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
+        measureHeight += (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
 
         measureWidth = Math.max(measureWidth, this.minWidth * density);
         measureHeight = Math.max(measureHeight, this.minHeight * density);
@@ -86,14 +86,14 @@ export class DockLayout extends common.DockLayout {
 
         var density = utils.layout.getDisplayDensity();
 
-        var childLeft = this.paddingLeft * density;
-        var childTop = this.paddingTop * density;
+        var childLeft = (this.borderLeftWidth + this.paddingLeft) * density;
+        var childTop = (this.borderTopWidth + this.paddingTop) * density;
 
         var x = childLeft;
         var y = childTop;
 
-        var remainingWidth = Math.max(0, right - left - ((this.paddingLeft + this.paddingRight) * density));
-        var remainingHeight = Math.max(0, bottom - top - ((this.paddingTop + this.paddingBottom) * density));
+        var remainingWidth = Math.max(0, right - left - ((this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density));
+        var remainingHeight = Math.max(0, bottom - top - ((this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density));
 
         this.eachLayoutChild((child, last) => {
             let lp: CommonLayoutParams = child.style._getValue(nativeLayoutParamsProperty);
diff --git a/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts b/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
index 84edfbfc4..2eb752e54 100644
--- a/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/grid-layout/grid-layout.ios.ts
@@ -114,8 +114,8 @@ export class GridLayout extends common.GridLayout {
         let heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
 
         let density = utils.layout.getDisplayDensity();
-        let verticalPadding = (this.paddingTop + this.paddingBottom) * density;
-        let horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
+        let verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
+        let horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
 
         let infinityWidth = widthMode === utils.layout.UNSPECIFIED;
         let infinityHeight = heightMode === utils.layout.UNSPECIFIED;
@@ -159,8 +159,8 @@ export class GridLayout extends common.GridLayout {
 
         let density = utils.layout.getDisplayDensity();
 
-        let paddingLeft = this.paddingLeft * density;
-        let paddingTop = this.paddingTop * density;
+        let paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
+        let paddingTop = (this.borderTopWidth + this.paddingTop) * density;
 
         this.columnOffsets.length = 0;
         this.rowOffsets.length = 0;
diff --git a/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts b/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
index 2faed3689..f4245a1be 100644
--- a/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
@@ -24,8 +24,8 @@ export class StackLayout extends common.StackLayout {
         var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
 
         var isVertical = this.orientation === Orientation.vertical;
-        var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
-        var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
+        var verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
+        var horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
 
         var measureSpec: number;
 
@@ -100,10 +100,10 @@ export class StackLayout extends common.StackLayout {
 
     private layoutVertical(left: number, top: number, right: number, bottom: number): void {
         var density = utils.layout.getDisplayDensity();
-        var paddingLeft = this.paddingLeft * density;
-        var paddingRight = this.paddingRight * density;
-        var paddingTop = this.paddingTop * density;
-        var paddingBottom = this.paddingBottom * density;
+        var paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
+        var paddingRight = (this.borderRightWidth + this.paddingRight) * density;
+        var paddingTop = (this.borderTopWidth + this.paddingTop) * density;
+        var paddingBottom = (this.borderBottomWidth + this.paddingBottom) * density;
 
         var childTop: number;
         var childLeft: number = paddingLeft;
@@ -137,10 +137,10 @@ export class StackLayout extends common.StackLayout {
 
     private layoutHorizontal(left: number, top: number, right: number, bottom: number): void {
         var density = utils.layout.getDisplayDensity();
-        var paddingLeft = this.paddingLeft * density;
-        var paddingRight = this.paddingRight * density;
-        var paddingTop = this.paddingTop * density;
-        var paddingBottom = this.paddingBottom * density;
+        var paddingLeft = (this.borderLeftWidth + this.paddingLeft) * density;
+        var paddingRight = (this.borderRightWidth + this.paddingRight) * density;
+        var paddingTop = (this.borderTopWidth + this.paddingTop) * density;
+        var paddingBottom = (this.borderBottomWidth + this.paddingBottom) * density;
 
         var childTop: number = paddingTop;
         var childLeft: number;
diff --git a/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts b/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
index 77907741c..3adcebb34 100644
--- a/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/wrap-layout/wrap-layout.ios.ts
@@ -33,8 +33,8 @@ export class WrapLayout extends common.WrapLayout {
 
         var density = utils.layout.getDisplayDensity();
 
-        var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
-        var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
+        var horizontalPadding = (this.borderLeftWidth + this.paddingLeft + this.paddingRight + this.borderRightWidth) * density;
+        var verticalPadding = (this.borderTopWidth + this.paddingTop + this.paddingBottom + this.borderBottomWidth) * density;
 
         var availableWidth = widthMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : utils.layout.getMeasureSpecSize(widthMeasureSpec) - horizontalPadding;
         var availableHeight = heightMode === utils.layout.UNSPECIFIED ? Number.MAX_VALUE : utils.layout.getMeasureSpecSize(heightMeasureSpec) - verticalPadding;
@@ -129,14 +129,19 @@ export class WrapLayout extends common.WrapLayout {
 
         var density = utils.layout.getDisplayDensity();
 
-        var childLeft = this.paddingLeft * density;
-        var childTop = this.paddingTop * density;
+        const topPadding = (this.borderTopWidth + this.paddingTop) * density;
+        const leftPadding = (this.borderLeftWidth + this.paddingLeft) * density; 
+        const bottomPadding = (this.paddingBottom + this.borderBottomWidth) * density;
+        const rightPadding = (this.paddingRight + this.borderRightWidth) * density;
+
+        var childLeft = leftPadding;
+        var childTop = topPadding;
         var childrenLength: number;
         if (isVertical) {
-            childrenLength = bottom - top - (this.paddingBottom * density);
+            childrenLength = bottom - top - bottomPadding;
         }
         else {
-            childrenLength = right - left - (this.paddingRight * density);
+            childrenLength = right - left - rightPadding;
         }
 
         var rowOrColumn = 0;
@@ -152,10 +157,10 @@ export class WrapLayout extends common.WrapLayout {
             if (isVertical) {
                 childWidth = length;
                 childHeight = this.itemHeight > 0 ? this.itemHeight * density : childHeight;
-                let isFirst = childTop === this.paddingTop * density;
+                let isFirst = childTop === topPadding;
                 if (childTop + childHeight > childrenLength) {
                     // Move to top.
-                    childTop = this.paddingTop * density;
+                    childTop = topPadding;
 
                     if (!isFirst) {
                     // Move to right with current column width.
@@ -172,10 +177,10 @@ export class WrapLayout extends common.WrapLayout {
             else {
                 childWidth = this.itemWidth > 0 ? this.itemWidth * density : childWidth;
                 childHeight = length;
-                let isFirst = childLeft === this.paddingLeft * density;
+                let isFirst = childLeft === leftPadding;
                 if (childLeft + childWidth > childrenLength) {
                     // Move to left.
-                    childLeft = this.paddingLeft * density;
+                    childLeft = leftPadding;
 
                     if (!isFirst) {
                         // Move to bottom with current row height.
diff --git a/tns-core-modules/ui/progress/progress.android.ts b/tns-core-modules/ui/progress/progress.android.ts
index 02e447f00..6a98e14c3 100644
--- a/tns-core-modules/ui/progress/progress.android.ts
+++ b/tns-core-modules/ui/progress/progress.android.ts
@@ -78,9 +78,21 @@ export class ProgressStyler implements style.Styler {
             ProgressStyler.setBackgroundAndBorderProperty,
             ProgressStyler.resetBackgroundAndBorderProperty), "Progress");
 
-        style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Progress");
-        style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Progress");
-        style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Progress");
+
+        style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Progress");
+        
+        style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Progress");
+        style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Progress");
+        
         style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Progress");
     }
 }
diff --git a/tns-core-modules/ui/slider/slider.android.ts b/tns-core-modules/ui/slider/slider.android.ts
index 18ae4908d..fecd5a3d9 100644
--- a/tns-core-modules/ui/slider/slider.android.ts
+++ b/tns-core-modules/ui/slider/slider.android.ts
@@ -127,9 +127,21 @@ export class SliderStyler implements style.Styler {
             SliderStyler.setBackgroundAndBorderProperty,
             SliderStyler.resetBackgroundAndBorderProperty), "Slider");
 
-        style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Slider");
-        style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Slider");
-        style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Slider");
+
+        style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Slider");
+        
+        style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Slider");
+        style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Slider");
+
         style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Slider");
     }
 }
diff --git a/tns-core-modules/ui/styling/background-common.ts b/tns-core-modules/ui/styling/background-common.ts
index 991e9d3f9..e090b93b5 100644
--- a/tns-core-modules/ui/styling/background-common.ts
+++ b/tns-core-modules/ui/styling/background-common.ts
@@ -4,7 +4,6 @@ import enums = require("ui/enums");
 import definition = require("ui/styling/background");
 import cssValue = require("css-value");
 import utils = require("utils/utils");
-import { isAndroid }  from "platform"; 
 
 import * as typesModule from "utils/types";
 var types: typeof typesModule;
@@ -22,75 +21,158 @@ interface CSSValue {
 }
 
 export class Background implements definition.Background {
-    public static default = new Background(undefined, undefined, undefined, undefined, undefined, 0, undefined, 0, undefined);
+    public static default = new Background();
+    
+    public color: colorModule.Color;
+    public image: imageSource.ImageSource;
+    public repeat: string;
+    public position: string;
+    public size: string;
+    public borderTopColor: colorModule.Color;
+    public borderRightColor: colorModule.Color;
+    public borderBottomColor: colorModule.Color;
+    public borderLeftColor: colorModule.Color;
+    public borderTopWidth: number = 0;
+    public borderRightWidth: number = 0;
+    public borderBottomWidth: number = 0;
+    public borderLeftWidth: number = 0;
+    public borderTopLeftRadius: number = 0;
+    public borderTopRightRadius: number = 0;
+    public borderBottomLeftRadius: number = 0;
+    public borderBottomRightRadius: number = 0;
+    public clipPath: string;
 
-    color: colorModule.Color;
-    image: imageSource.ImageSource;
-    repeat: string;
-    position: string;
-    size: string;
-    // The ones below are used on Android only
-    borderWidth: number = 0;
-    borderColor: colorModule.Color;
-    borderRadius: number = 0;
-    clipPath: string;
-
-    constructor(
-        color: colorModule.Color,
-        image: imageSource.ImageSource,
-        repeat: string,
-        position: string,
-        size: string,
-        borderWidth: number,
-        borderColor: colorModule.Color,
-        borderRadius: number,
-        clipPath: string
-    ) {
-        this.color = color;
-        this.image = image;
-        this.repeat = repeat;
-        this.position = position;
-        this.size = size;
-        this.borderWidth = borderWidth;
-        this.borderColor = borderColor;
-        this.borderRadius = borderRadius;
-        this.clipPath = clipPath;
+    private clone(): Background{
+        let clone = new Background();
+        
+        clone.color = this.color;
+        clone.image = this.image;
+        clone.repeat = this.repeat;
+        clone.position = this.position;
+        clone.size = this.size;
+        clone.borderTopColor = this.borderTopColor;
+        clone.borderRightColor = this.borderRightColor;
+        clone.borderBottomColor = this.borderBottomColor;
+        clone.borderLeftColor = this.borderLeftColor;
+        clone.borderTopWidth = this.borderTopWidth;
+        clone.borderRightWidth = this.borderRightWidth;
+        clone.borderBottomWidth = this.borderBottomWidth;
+        clone.borderLeftWidth = this.borderLeftWidth;
+        clone.borderTopLeftRadius = this.borderTopLeftRadius;
+        clone.borderTopRightRadius = this.borderTopRightRadius;
+        clone.borderBottomRightRadius = this.borderBottomRightRadius;
+        clone.borderBottomLeftRadius = this.borderBottomLeftRadius;
+        clone.clipPath = this.clipPath;
+        
+        return clone;        
     }
 
     public withColor(value: colorModule.Color): Background {
-        return new Background(value, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
+        let clone = this.clone();
+        clone.color = value;
+        return clone;
     }
 
     public withImage(value: imageSource.ImageSource): Background {
-        return new Background(this.color, value, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
+        let clone = this.clone();
+        clone.image = value;
+        return clone;
     }
 
     public withRepeat(value: string): Background {
-        return new Background(this.color, this.image, value, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
+        let clone = this.clone();
+        clone.repeat = value;
+        return clone;
     }
 
     public withPosition(value: string): Background {
-        return new Background(this.color, this.image, this.repeat, value, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
+        let clone = this.clone();
+        clone.position = value;
+        return clone;
     }
 
     public withSize(value: string): Background {
-        return new Background(this.color, this.image, this.repeat, this.position, value, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
+        let clone = this.clone();
+        clone.size = value;
+        return clone;
     }
     
-    public withBorderWidth(value: number): Background {
-        return new Background(this.color, this.image, this.repeat, this.position, this.size, value, this.borderColor, this.borderRadius, this.clipPath);
+    public withBorderTopColor(value: colorModule.Color): Background {
+        let clone = this.clone();
+        clone.borderTopColor = value;
+        return clone;
+    }
+    
+    public withBorderRightColor(value: colorModule.Color): Background {
+        let clone = this.clone();
+        clone.borderRightColor = value;
+        return clone;
+    }
+    
+    public withBorderBottomColor(value: colorModule.Color): Background {
+        let clone = this.clone();
+        clone.borderBottomColor = value;
+        return clone;
+    }
+    
+    public withBorderLeftColor(value: colorModule.Color): Background {
+        let clone = this.clone();
+        clone.borderLeftColor = value;
+        return clone;
     }
 
-    public withBorderColor(value: colorModule.Color): Background {
-        return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, value, this.borderRadius, this.clipPath);
+    public withBorderTopWidth(value: number): Background {
+        let clone = this.clone();
+        clone.borderTopWidth = value;
+        return clone;
     }
 
-    public withBorderRadius(value: number): Background {
-        return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, value, this.clipPath);
+    public withBorderRightWidth(value: number): Background {
+        let clone = this.clone();
+        clone.borderRightWidth = value;
+        return clone;
+    }
+
+    public withBorderBottomWidth(value: number): Background {
+        let clone = this.clone();
+        clone.borderBottomWidth = value;
+        return clone;
+    }
+
+    public withBorderLeftWidth(value: number): Background {
+        let clone = this.clone();
+        clone.borderLeftWidth = value;
+        return clone;
+    }
+
+    public withBorderTopLeftRadius(value: number): Background {
+        let clone = this.clone();
+        clone.borderTopLeftRadius = value;
+        return clone;
+    }
+
+    public withBorderTopRightRadius(value: number): Background {
+        let clone = this.clone();
+        clone.borderTopRightRadius = value;
+        return clone;
+    }
+
+    public withBorderBottomRightRadius(value: number): Background {
+        let clone = this.clone();
+        clone.borderBottomRightRadius = value;
+        return clone;
+    }
+
+    public withBorderBottomLeftRadius(value: number): Background {
+        let clone = this.clone();
+        clone.borderBottomLeftRadius = value;
+        return clone;
     }
 
     public withClipPath(value: string): Background {
-        return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, value);
+        let clone = this.clone();
+        clone.clipPath = value;
+        return clone;
     }
 
     public getDrawParams(width: number, height: number): definition.BackgroundDrawParams {
@@ -252,17 +334,11 @@ export class Background implements definition.Background {
     public isEmpty(): boolean {
         ensureTypes();
 
-        if (isAndroid){
-            return types.isNullOrUndefined(this.image) 
-                && types.isNullOrUndefined(this.color)
-                && !this.borderWidth
-                && !this.borderRadius
-                && !this.clipPath;
-        }
-        else {
-            return types.isNullOrUndefined(this.image) 
-                && types.isNullOrUndefined(this.color);    
-        }
+        return types.isNullOrUndefined(this.color)
+            && types.isNullOrUndefined(this.image) 
+            && !this.hasBorderWidth()
+            && !this.hasBorderRadius()
+            && !this.clipPath;
     }
 
     public static equals(value1: Background, value2: Background): boolean {
@@ -276,29 +352,94 @@ export class Background implements definition.Background {
             return false;
         }
 
-        if (isAndroid){
-            return value1.image === value2.image 
-                && value1.position === value2.position 
-                && value1.repeat === value2.repeat 
-                && value1.size === value2.size 
-                && colorModule.Color.equals(value1.color, value2.color)
-                && value1.borderWidth === value2.borderWidth
-                && colorModule.Color.equals(value1.borderColor, value2.borderColor) 
-                && value1.borderRadius === value2.borderRadius
-                && value1.clipPath === value2.clipPath;
-        }
-        else {
-            return value1.image === value2.image 
-                && value1.position === value2.position 
-                && value1.repeat === value2.repeat 
-                && value1.size === value2.size 
-                && colorModule.Color.equals(value1.color, value2.color);
-        }
-        
+        return colorModule.Color.equals(value1.color, value2.color)
+            && value1.image === value2.image 
+            && value1.position === value2.position 
+            && value1.repeat === value2.repeat 
+            && value1.size === value2.size 
+            && colorModule.Color.equals(value1.borderTopColor, value2.borderTopColor) 
+            && colorModule.Color.equals(value1.borderRightColor, value2.borderRightColor) 
+            && colorModule.Color.equals(value1.borderBottomColor, value2.borderBottomColor) 
+            && colorModule.Color.equals(value1.borderLeftColor, value2.borderLeftColor) 
+            && value1.borderTopWidth === value2.borderTopWidth
+            && value1.borderRightWidth === value2.borderRightWidth
+            && value1.borderBottomWidth === value2.borderBottomWidth
+            && value1.borderLeftWidth === value2.borderLeftWidth
+            && value1.borderTopLeftRadius === value2.borderTopLeftRadius
+            && value1.borderTopRightRadius === value2.borderTopRightRadius
+            && value1.borderBottomRightRadius === value2.borderBottomRightRadius
+            && value1.borderBottomLeftRadius === value2.borderBottomLeftRadius
+            && value1.clipPath === value2.clipPath;
+    }
+
+    public hasBorderColor(): boolean {
+        return !types.isNullOrUndefined(this.borderTopColor) 
+            || !types.isNullOrUndefined(this.borderRightColor) 
+            || !types.isNullOrUndefined(this.borderBottomColor) 
+            || !types.isNullOrUndefined(this.borderLeftColor);
+    }
+
+    public hasBorderWidth(): boolean {
+        return this.borderTopWidth > 0 
+            || this.borderRightWidth > 0 
+            || this.borderBottomWidth > 0 
+            || this.borderLeftWidth > 0
     }
     
+    public hasBorderRadius(): boolean {
+        return this.borderTopLeftRadius > 0 
+            || this.borderTopRightRadius > 0 
+            || this.borderBottomRightRadius > 0 
+            || this.borderBottomLeftRadius > 0
+    }
+
+    public hasUniformBorderColor(): boolean {
+        return colorModule.Color.equals(this.borderTopColor, this.borderRightColor) 
+            && colorModule.Color.equals(this.borderTopColor, this.borderBottomColor)
+            && colorModule.Color.equals(this.borderTopColor, this.borderLeftColor); 
+    }
+    
+    public hasUniformBorderWidth(): boolean {
+        return this.borderTopWidth === this.borderRightWidth 
+            && this.borderTopWidth === this.borderBottomWidth
+            && this.borderTopWidth === this.borderLeftWidth;
+    }
+    
+    public hasUniformBorderRadius(): boolean {
+        return this.borderTopLeftRadius === this.borderTopRightRadius 
+            && this.borderTopLeftRadius === this.borderBottomRightRadius
+            && this.borderTopLeftRadius === this.borderBottomLeftRadius;
+    }
+    
+    public hasUniformBorder(): boolean {
+        return this.hasUniformBorderColor() 
+            && this.hasUniformBorderWidth() 
+            && this.hasUniformBorderRadius();
+    }
+    
+    public getUniformBorderColor(): colorModule.Color {
+        if (this.hasUniformBorderColor()){
+            return this.borderTopColor;
+        }
+        return undefined;
+    };
+
+    public getUniformBorderWidth(): number {
+        if (this.hasUniformBorderWidth()){
+            return this.borderTopWidth;
+        }
+        return 0;
+    };
+
+    public getUniformBorderRadius(): number {
+        if (this.hasUniformBorderRadius()){
+            return this.borderTopLeftRadius;
+        }
+        return 0;
+    };
+
     public toString(): string {
-        return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderWidth: ${this.borderWidth}; borderColor: ${this.borderColor}; borderRadius: ${this.borderRadius}; clipPath: ${this.clipPath};`;
+        return `isEmpty: ${this.isEmpty()}; color: ${this.color}; image: ${this.image}; repeat: ${this.repeat}; position: ${this.position}; size: ${this.size}; borderTopColor: ${this.borderTopColor}; borderRightColor: ${this.borderRightColor}; borderBottomColor: ${this.borderBottomColor}; borderLeftColor: ${this.borderLeftColor}; borderTopWidth: ${this.borderTopWidth}; borderRightWidth: ${this.borderRightWidth}; borderBottomWidth: ${this.borderBottomWidth}; borderLeftWidth: ${this.borderLeftWidth}; borderTopLeftRadius: ${this.borderTopLeftRadius}; borderTopRightRadius: ${this.borderTopRightRadius}; borderBottomRightRadius: ${this.borderBottomRightRadius}; borderBottomLeftRadius: ${this.borderBottomLeftRadius}; clipPath: ${this.clipPath};`;
     }
 }
 
diff --git a/tns-core-modules/ui/styling/background.android.ts b/tns-core-modules/ui/styling/background.android.ts
index 927923947..958dbec43 100644
--- a/tns-core-modules/ui/styling/background.android.ts
+++ b/tns-core-modules/ui/styling/background.android.ts
@@ -51,8 +51,8 @@ export module ad {
         if (v instanceof button.Button 
         && !types.isNullOrUndefined(backgroundDrawable) 
         && types.isFunction(backgroundDrawable.setColorFilter) 
-        && background.borderWidth === 0 
-        && background.borderRadius === 0 
+        && !background.hasBorderWidth()
+        && !background.hasBorderRadius()
         && !background.clipPath 
         && types.isNullOrUndefined(background.image) 
         && !types.isNullOrUndefined(background.color)) {
@@ -75,7 +75,7 @@ export module ad {
                 refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
             }
             
-            if ((background.borderWidth || background.borderRadius || background.clipPath) && getSDK() < 18) {
+            if ((background.hasBorderWidth() || background.hasBorderRadius() || background.clipPath) && getSDK() < 18) {
                 // Switch to software because of unsupported canvas methods if hardware acceleration is on:
                 // http://developer.android.com/guide/topics/graphics/hardware-accel.html
                 cache.layerType = cache.getLayerType();
@@ -107,10 +107,10 @@ export module ad {
         let bottomPadding = v.style.paddingBottom ? v.style.paddingBottom : nativeView.getPaddingBottom() / density; 
 
         nativeView.setPadding(
-            Math.round((background.borderWidth + leftPadding) * density),
-            Math.round((background.borderWidth + topPadding) * density),
-            Math.round((background.borderWidth + rightPadding) * density),
-            Math.round((background.borderWidth + bottomPadding) * density)
+            Math.round((background.borderLeftWidth + leftPadding) * density),
+            Math.round((background.borderTopWidth + topPadding) * density),
+            Math.round((background.borderRightWidth + rightPadding) * density),
+            Math.round((background.borderBottomWidth + bottomPadding) * density)
         );
     }
 }
@@ -128,10 +128,24 @@ function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript
         }
         
         borderDrawable.refresh(
-            background.borderWidth, 
-            (background.borderColor && background.borderColor.android) ? background.borderColor.android : 0,
-            background.borderRadius,
+            
+            (background.borderTopColor && background.borderTopColor.android) ? background.borderTopColor.android : 0,
+            (background.borderRightColor && background.borderRightColor.android) ? background.borderRightColor.android : 0,
+            (background.borderBottomColor && background.borderBottomColor.android) ? background.borderBottomColor.android : 0,
+            (background.borderLeftColor && background.borderLeftColor.android) ? background.borderLeftColor.android : 0,
+
+            background.borderTopWidth, 
+            background.borderRightWidth, 
+            background.borderBottomWidth, 
+            background.borderLeftWidth,
+
+            background.borderTopLeftRadius,
+            background.borderTopRightRadius,
+            background.borderBottomRightRadius,
+            background.borderBottomLeftRadius,
+
             background.clipPath,
+
             (background.color && background.color.android) ? background.color.android : 0,
             (background.image && background.image.android) ? background.image.android : null,
             background.repeat,
diff --git a/tns-core-modules/ui/styling/background.d.ts b/tns-core-modules/ui/styling/background.d.ts
index 752393f82..cd72344bd 100644
--- a/tns-core-modules/ui/styling/background.d.ts
+++ b/tns-core-modules/ui/styling/background.d.ts
@@ -13,37 +13,43 @@ declare module "ui/styling/background" {
     }
 
     export class Background {
-        static default: Background;
-        color: colorModule.Color;
-        image: imageSource.ImageSource;
-        repeat: string;
-        position: string;
-        size: string;
-        borderWidth: number;
-        borderColor: colorModule.Color;
-        borderRadius: number;
-        clipPath: string;
-
-        constructor(
-            color: colorModule.Color,
-            image: imageSource.ImageSource,
-            repeat: string,
-            position: string,
-            size: string,
-            borderWidth: number,
-            borderColor: colorModule.Color,
-            borderRadius: number,
-            clipPath: string
-        );
+        public static default: Background;
+        public color: colorModule.Color;
+        public image: imageSource.ImageSource;
+        public repeat: string;
+        public position: string;
+        public size: string;
+        public borderTopColor: colorModule.Color;
+        public borderRightColor: colorModule.Color;
+        public borderBottomColor: colorModule.Color;
+        public borderLeftColor: colorModule.Color;
+        public borderTopWidth: number;
+        public borderRightWidth: number;
+        public borderBottomWidth: number;
+        public borderLeftWidth: number;
+        public borderTopLeftRadius: number;
+        public borderTopRightRadius: number;
+        public borderBottomRightRadius: number;
+        public borderBottomLeftRadius: number;
+        public clipPath: string;
 
         public withColor(value: colorModule.Color): Background;
         public withImage(value: imageSource.ImageSource): Background;
         public withRepeat(value: string): Background;
         public withPosition(value: string): Background;
         public withSize(value: string): Background;
-        public withBorderWidth(value: number): Background;
-        public withBorderColor(value: colorModule.Color): Background;
-        public withBorderRadius(value: number): Background;
+        public withBorderTopColor(value: colorModule.Color): Background;
+        public withBorderRightColor(value: colorModule.Color): Background;
+        public withBorderBottomColor(value: colorModule.Color): Background;
+        public withBorderLeftColor(value: colorModule.Color): Background;
+        public withBorderTopWidth(value: number): Background;
+        public withBorderRightWidth(value: number): Background;
+        public withBorderBottomWidth(value: number): Background;
+        public withBorderLeftWidth(value: number): Background;
+        public withBorderTopLeftRadius(value: number): Background;
+        public withBorderTopRightRadius(value: number): Background;
+        public withBorderBottomRightRadius(value: number): Background;
+        public withBorderBottomLeftRadius(value: number): Background;
         public withClipPath(value: string): Background;
 
         public getDrawParams(width: number, height: number): BackgroundDrawParams;
@@ -51,6 +57,17 @@ declare module "ui/styling/background" {
         public isEmpty(): boolean;
 
         public static equals(value1: Background, value2: Background): boolean;
+
+        public hasBorderColor(): boolean;
+        public hasBorderWidth(): boolean;
+        public hasBorderRadius(): boolean;
+        public hasUniformBorderColor(): boolean;
+        public hasUniformBorderWidth(): boolean;
+        public hasUniformBorderRadius(): boolean;
+        public hasUniformBorder(): boolean;
+        public getUniformBorderColor(): colorModule.Color;
+        public getUniformBorderWidth(): number;
+        public getUniformBorderRadius(): number;
     }
 
     export module ios {
diff --git a/tns-core-modules/ui/styling/background.ios.ts b/tns-core-modules/ui/styling/background.ios.ts
index 225f0775c..920cdac96 100644
--- a/tns-core-modules/ui/styling/background.ios.ts
+++ b/tns-core-modules/ui/styling/background.ios.ts
@@ -1,6 +1,7 @@
 import viewModule = require("ui/core/view");
 import common = require("./background-common");
 import * as styleModule from "./style";
+import { Color } from "color";
 
 import * as utils from "utils/utils";
 
@@ -15,34 +16,160 @@ function ensureStyle() {
 
 export module ios {
     export function createBackgroundUIColor(view: viewModule.View, flip?: boolean): UIColor {
-        if (!view._nativeView) {
+        let nativeView = <UIView>view._nativeView; 
+        if (!nativeView) {
             return undefined;
         }
         ensureStyle();
 
-        if (view.style.clipPath) {
-            drawClipPath(view);
-        }
-
-        var background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
-
+        let background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
         if (!background || background.isEmpty()) {
             return undefined;
         }
 
-        if (!background.image) {
-            return background.color.ios;
+        // Clip-path
+        if (background.clipPath) {
+            drawClipPath(nativeView, background);
         }
 
-        // We have an image for a background
-        var frame = (<UIView>view._nativeView).frame;
-        var boundsWidth = frame.size.width;
-        var boundsHeight = frame.size.height;
+        // Borders
+        if (background.hasUniformBorder()){
+            let borderColor = background.getUniformBorderColor();
+            if (borderColor && borderColor.ios){
+                nativeView.layer.borderColor = borderColor.ios.CGColor; 
+            }
+            else {
+                nativeView.layer.borderColor = undefined; 
+            }
+            nativeView.layer.borderWidth = background.getUniformBorderWidth();
+            nativeView.layer.cornerRadius = background.getUniformBorderRadius();
+            nativeView.clipsToBounds = (nativeView.layer.cornerRadius > 0);
+        }
+        else { // Draw non-uniform borders
+            // Clear everything
+            nativeView.layer.borderColor = undefined; 
+            nativeView.layer.borderWidth = 0;
+            nativeView.layer.cornerRadius = 0;
+            nativeView.clipsToBounds = false;
+            
+            if (nativeView["topBorderLayer"]){
+                (<CAShapeLayer>nativeView["topBorderLayer"]).removeFromSuperlayer();
+            }
+            
+            if (nativeView["rightBorderLayer"]){
+                (<CAShapeLayer>nativeView["rightBorderLayer"]).removeFromSuperlayer();
+            }
+            
+            if (nativeView["bottomBorderLayer"]){
+                (<CAShapeLayer>nativeView["bottomBorderLayer"]).removeFromSuperlayer();
+            }
+            
+            if (nativeView["leftBorderLayer"]){
+                (<CAShapeLayer>nativeView["leftBorderLayer"]).removeFromSuperlayer();
+            }
+            
+            // Draw borders
+            let nativeViewBounds = {
+                left: nativeView.bounds.origin.x,
+                top: nativeView.bounds.origin.y,
+                bottom: nativeView.bounds.size.height,
+                right: nativeView.bounds.size.width
+            };
 
+            let top = background.borderTopWidth;
+            let right = background.borderRightWidth;
+            let bottom = background.borderBottomWidth;
+            let left = background.borderLeftWidth;
+            
+            let lto: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.top};// left-top-outside
+            let lti: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.top + top}; // left-top-inside
+
+            let rto: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.top}; // right-top-outside
+            let rti: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.top + top}; // right-top-inside
+            
+            let rbo: viewModule.Point = {x: nativeViewBounds.right, y: nativeViewBounds.bottom}; // right-bottom-outside
+            let rbi: viewModule.Point = {x: nativeViewBounds.right - right, y: nativeViewBounds.bottom - bottom}; // right-bottom-inside
+
+            let lbo: viewModule.Point = {x: nativeViewBounds.left, y: nativeViewBounds.bottom}; // left-bottom-outside
+            let lbi: viewModule.Point = {x: nativeViewBounds.left + left, y: nativeViewBounds.bottom - bottom}; // left-bottom-inside
+            
+            if (top > 0 && background.borderTopColor && background.borderTopColor.ios){
+                let topBorderPath = CGPathCreateMutable();
+                CGPathMoveToPoint(topBorderPath, null, lto.x, lto.y);
+                CGPathAddLineToPoint(topBorderPath, null, rto.x, rto.y);
+                CGPathAddLineToPoint(topBorderPath, null, rti.x, rti.y); 
+                CGPathAddLineToPoint(topBorderPath, null, lti.x, lti.y); 
+                CGPathAddLineToPoint(topBorderPath, null, lto.x, lto.y);
+                
+                let topBorderLayer = CAShapeLayer.layer();
+                topBorderLayer.fillColor = background.borderTopColor.ios.CGColor; 
+                topBorderLayer.path = topBorderPath;
+
+                nativeView.layer.addSublayer(topBorderLayer);
+                nativeView["topBorderLayer"] = topBorderLayer;
+            }
+            
+            if (right > 0 && background.borderRightColor && background.borderRightColor.ios){
+                let rightBorderPath = CGPathCreateMutable();
+                CGPathMoveToPoint(rightBorderPath, null, rto.x, rto.y);
+                CGPathAddLineToPoint(rightBorderPath, null, rbo.x, rbo.y);
+                CGPathAddLineToPoint(rightBorderPath, null, rbi.x, rbi.y); 
+                CGPathAddLineToPoint(rightBorderPath, null, rti.x, rti.y); 
+                CGPathAddLineToPoint(rightBorderPath, null, rto.x, rto.y);
+                
+                let rightBorderLayer = CAShapeLayer.layer();
+                rightBorderLayer.fillColor = background.borderRightColor.ios.CGColor; 
+                rightBorderLayer.path = rightBorderPath;
+
+                nativeView.layer.addSublayer(rightBorderLayer);
+                nativeView["rightBorderLayer"] = rightBorderLayer;
+            }
+            
+            if (bottom > 0 && background.borderBottomColor && background.borderBottomColor.ios){
+                let bottomBorderPath = CGPathCreateMutable();
+                CGPathMoveToPoint(bottomBorderPath, null, rbo.x, rbo.y);
+                CGPathAddLineToPoint(bottomBorderPath, null, lbo.x, lbo.y);
+                CGPathAddLineToPoint(bottomBorderPath, null, lbi.x, lbi.y); 
+                CGPathAddLineToPoint(bottomBorderPath, null, rbi.x, rbi.y); 
+                CGPathAddLineToPoint(bottomBorderPath, null, rbo.x, rbo.y);
+                
+                let bottomBorderLayer = CAShapeLayer.layer();
+                bottomBorderLayer.fillColor = background.borderBottomColor.ios.CGColor; 
+                bottomBorderLayer.path = bottomBorderPath;
+
+                nativeView.layer.addSublayer(bottomBorderLayer);
+                nativeView["bottomBorderLayer"] = bottomBorderLayer;
+            }
+            
+            if (left > 0 && background.borderLeftColor && background.borderLeftColor.ios){
+                let leftBorderPath = CGPathCreateMutable();
+                CGPathMoveToPoint(leftBorderPath, null, lbo.x, lbo.y);
+                CGPathAddLineToPoint(leftBorderPath, null, lto.x, lto.y);
+                CGPathAddLineToPoint(leftBorderPath, null, lti.x, lti.y); 
+                CGPathAddLineToPoint(leftBorderPath, null, lbi.x, lbi.y); 
+                CGPathAddLineToPoint(leftBorderPath, null, lbo.x, lbo.y);
+                
+                let leftBorderLayer = CAShapeLayer.layer();
+                leftBorderLayer.fillColor = background.borderLeftColor.ios.CGColor; 
+                leftBorderLayer.path = leftBorderPath;
+
+                nativeView.layer.addSublayer(leftBorderLayer);
+                nativeView["leftBorderLayer"] = leftBorderLayer;
+            }
+        }
+
+        if (!background.image) {
+            return background.color ? background.color.ios : undefined;
+        }
+
+        let frame = nativeView.frame;
+        let boundsWidth = frame.size.width;
+        let boundsHeight = frame.size.height;
         if (!boundsWidth || !boundsHeight) {
             return undefined;
         }
 
+        // We have an image for a background
         var img = <UIImage>background.image.ios;
         var params = background.getDrawParams(boundsWidth, boundsHeight);
 
@@ -106,10 +233,9 @@ export module ios {
     }
 }
 
-function drawClipPath(view: viewModule.View) {
+function drawClipPath(nativeView: UIView, background: common.Background) {
     var path: any;
 
-    var nativeView = <UIView>view._nativeView;
     var bounds = {
         left: nativeView.bounds.origin.x,
         top: nativeView.bounds.origin.y,
@@ -121,7 +247,7 @@ function drawClipPath(view: viewModule.View) {
         return;
     }
 
-    var clipPath = view.style.clipPath;
+    var clipPath = background.clipPath;
 
     var functionName = clipPath.substring(0, clipPath.indexOf("("));
     var value = clipPath.replace(`${functionName}(`, "").replace(")", "");
@@ -190,13 +316,15 @@ function drawClipPath(view: viewModule.View) {
         nativeView.layer.mask = shape;
         nativeView.clipsToBounds = true;
 
-        if (view.borderWidth > 0 && view.borderColor) {
+        let borderWidth = background.getUniformBorderWidth();
+        let borderColor = background.getUniformBorderColor();
+
+        if (borderWidth > 0 && borderColor instanceof Color){
             var borderLayer = CAShapeLayer.layer();
             borderLayer.path = path;
-            borderLayer.lineWidth = view.borderWidth * 2;
-            borderLayer.strokeColor = view.borderColor.ios.CGColor;
+            borderLayer.lineWidth = borderWidth * 2;
+            borderLayer.strokeColor = borderColor.ios.CGColor;
             borderLayer.fillColor = utils.ios.getter(UIColor, UIColor.clearColor).CGColor;
-
             borderLayer.frame = nativeView.bounds;
 
             nativeView.layer.borderColor = undefined;
diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts
index b4a3999b1..fdd70db61 100644
--- a/tns-core-modules/ui/styling/style.d.ts
+++ b/tns-core-modules/ui/styling/style.d.ts
@@ -13,6 +13,13 @@ declare module "ui/styling/style" {
         bottom: number;
     }
 
+    export interface BorderColor {
+        top: Color;
+        right: Color;
+        bottom: Color;
+        left: Color;
+    }
+
     export interface CommonLayoutParams {
         width: number;
         height: number;
@@ -49,9 +56,21 @@ declare module "ui/styling/style" {
         public backgroundSize: string;
         public backgroundPosition: string;
         public backgroundRepeat: string;
-        public borderColor: Color;
-        public borderWidth: number;
-        public borderRadius: number;
+        public borderColor: string | Color;
+        public borderTopColor: Color;
+        public borderRightColor: Color;
+        public borderBottomColor: Color;
+        public borderLeftColor: Color;
+        public borderWidth: string | number;
+        public borderTopWidth: number;
+        public borderRightWidth: number;
+        public borderBottomWidth: number;
+        public borderLeftWidth: number;
+        public borderRadius: string | number;
+        public borderTopLeftRadius: number;
+        public borderTopRightRadius: number;
+        public borderBottomRightRadius: number;
+        public borderBottomLeftRadius: number;
         public fontSize: number;
         public fontFamily: string;
         public fontStyle: string;
@@ -113,9 +132,22 @@ declare module "ui/styling/style" {
     export var backgroundRepeatProperty: styleProperty.Property;
     export var backgroundSizeProperty: styleProperty.Property;
     export var backgroundPositionProperty: styleProperty.Property;
-    export var borderColorProperty: styleProperty.Property;
-    export var borderWidthProperty: styleProperty.Property;
-    export var borderRadiusProperty: styleProperty.Property;
+    
+    export var borderTopColorProperty: styleProperty.Property;
+    export var borderRightColorProperty: styleProperty.Property;
+    export var borderBottomColorProperty: styleProperty.Property;
+    export var borderLeftColorProperty: styleProperty.Property;
+    
+    export var borderTopWidthProperty: styleProperty.Property;
+    export var borderRightWidthProperty: styleProperty.Property;
+    export var borderBottomWidthProperty: styleProperty.Property;
+    export var borderLeftWidthProperty: styleProperty.Property;
+    
+    export var borderTopLeftRadiusProperty: styleProperty.Property;
+    export var borderTopRightRadiusProperty: styleProperty.Property;
+    export var borderBottomRightRadiusProperty: styleProperty.Property;
+    export var borderBottomLeftRadiusProperty: styleProperty.Property;
+    
     export var clipPathProperty: styleProperty.Property;
     export var backgroundInternalProperty: styleProperty.Property;
     export var fontSizeProperty: styleProperty.Property;
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index 51deced54..b00b145bc 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -63,6 +63,11 @@ function parseMargin(value: any): ThicknessValue {
             top = bottom = arr[0];
             right = left = arr[1];
         }
+        else if (arr.length === 3) {
+            top = arr[0];
+            right = left = arr[1];
+            bottom = arr[2];
+        }
         else if (arr.length === 4) {
             top = arr[0];
             right = arr[1];
@@ -93,37 +98,6 @@ function parseMargin(value: any): ThicknessValue {
     }
 }
 
-function parseThickness(value: any): definition.Thickness {
-    var result: definition.Thickness = { top: 0, right: 0, bottom: 0, left: 0 };
-    if (types.isString(value)) {
-        var arr = value.split(/[ ,]+/);
-        var top = parseInt(arr[0]);
-        top = isNaN(top) ? 0 : top;
-
-        var right = parseInt(arr[1]);
-        right = isNaN(right) ? top : right;
-
-        var bottom = parseInt(arr[2]);
-        bottom = isNaN(bottom) ? top : bottom;
-
-        var left = parseInt(arr[3]);
-        left = isNaN(left) ? right : left;
-
-        result.top = top;
-        result.right = right;
-        result.bottom = bottom;
-        result.left = left;
-
-    } else if (types.isNumber(value)) {
-        result.top = result.right = result.bottom = result.left = value;
-    }
-    else {
-        result = value;
-    }
-
-    return result;
-}
-
 function layoutParamsComparer(x: definition.CommonLayoutParams, y: definition.CommonLayoutParams): boolean {
     return x.width === y.width
         && x.height === y.height
@@ -273,123 +247,6 @@ function isMinWidthHeightValid(value: number): boolean {
     return !isNaN(value) && value >= 0.0 && isFinite(value);
 }
 
-function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (!Color.equals(currentBackground.color, data.newValue)) {
-        style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
-    }
-}
-
-function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var url: string = data.newValue;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    var isValid = false;
-
-    if (types.isString(data.newValue)) {
-        var pattern: RegExp = /url\(('|")(.*?)\1\)/;
-        var match = url.match(pattern);
-        if (match && match[2]) {
-            url = match[2];
-        }
-
-        ensureImageSource();
-
-        if (utils.isDataURI(url)) {
-            var base64Data = url.split(",")[1];
-            if (types.isDefined(base64Data)) {
-                style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
-                isValid = true;
-            }
-        }
-        else if (utils.isFileOrResourcePath(url)) {
-            style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
-            isValid = true;
-        }
-        else if (url.indexOf("http") !== -1) {
-            style["_url"] = url;
-            style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
-            imageSource.fromUrl(url).then((r) => {
-                if (style && style["_url"] === url) {
-                    // Get the current background again, as it might have changed while doing the request.
-                    currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-                    style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
-                }
-            });
-            isValid = true;
-        }
-    }
-
-    if (!isValid) {
-        style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
-    }
-}
-
-function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (data.newValue !== currentBackground.repeat) {
-        style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
-    }
-}
-
-function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (data.newValue !== currentBackground.position) {
-        style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
-    }
-}
-
-function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (data.newValue !== currentBackground.size) {
-        style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
-    }
-}
-
-function onBorderWidthPropertyChanged(data: PropertyChangeData) {
-    if (platform.isAndroid) {
-        var style = <Style>data.object;
-        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-        if (data.newValue !== currentBackground.borderWidth) {
-            style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
-        }
-    }
-}
-
-function onBorderColorPropertyChanged(data: PropertyChangeData) {
-    if (platform.isAndroid) {
-        var style = <Style>data.object;
-        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-        if (data.newValue !== currentBackground.borderColor) {
-            style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
-        }
-    }
-}
-
-function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
-    if (platform.isAndroid) {
-        var style = <Style>data.object;
-        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-        if (data.newValue !== currentBackground.borderRadius) {
-            style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
-        }
-    }
-}
-
-function onClipPathPropertyChanged(data: PropertyChangeData) {
-    if (platform.isAndroid) {
-        var style = <Style>data.object;
-        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-        if (data.newValue !== currentBackground.clipPath) {
-            style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
-        }
-    }
-}
-
 function getHandlerInternal(propertyId: number, classInfo: types.ClassInfo): definition.StylePropertyChangedHandler {
     var className = classInfo ? classInfo.name : "default";
     var handlerKey = className + propertyId;
@@ -632,25 +489,133 @@ export class Style extends DependencyObservable implements styling.Style {
         this._setValue(backgroundPositionProperty, value);
     }
 
-    get borderColor(): Color {
-        return this._getValue(borderColorProperty);
+    get borderColor(): string | Color {
+        if (Color.equals(this.borderTopColor, this.borderRightColor) && 
+            Color.equals(this.borderTopColor, this.borderBottomColor) && 
+            Color.equals(this.borderTopColor, this.borderLeftColor)){
+            return this.borderTopColor;
+        }
+        else {
+            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
+        }
     }
-    set borderColor(value: Color) {
-        this._setValue(borderColorProperty, value);
+    set borderColor(value: string | Color) {
+        if (value instanceof Color){
+            value = (<Color>value).hex;
+        }
+        this._setShorthandProperty("border-color", value);
+        }
+
+    get borderTopColor(): Color {
+        return this._getValue(borderTopColorProperty);
+    }
+    set borderTopColor(value: Color) {
+        this._setValue(borderTopColorProperty, value);
     }
 
-    get borderWidth(): number {
-        return this._getValue(borderWidthProperty);
+    get borderRightColor(): Color {
+        return this._getValue(borderRightColorProperty);
     }
-    set borderWidth(value: number) {
-        this._setValue(borderWidthProperty, value);
+    set borderRightColor(value: Color) {
+        this._setValue(borderRightColorProperty, value);
     }
 
-    get borderRadius(): number {
-        return this._getValue(borderRadiusProperty);
+    get borderBottomColor(): Color {
+        return this._getValue(borderBottomColorProperty);
     }
-    set borderRadius(value: number) {
-        this._setValue(borderRadiusProperty, value);
+    set borderBottomColor(value: Color) {
+        this._setValue(borderBottomColorProperty, value);
+    }
+
+    get borderLeftColor(): Color {
+        return this._getValue(borderLeftColorProperty);
+    }
+    set borderLeftColor(value: Color) {
+        this._setValue(borderLeftColorProperty, value);
+    }
+
+    get borderWidth(): string | number {
+        if (this.borderTopWidth === this.borderRightWidth && 
+            this.borderTopWidth === this.borderBottomWidth && 
+            this.borderTopWidth === this.borderLeftWidth){
+                return this.borderTopWidth;
+        }
+        else {
+            return `${this.borderTopWidth} ${this.borderRightWidth} ${this.borderBottomWidth} ${this.borderLeftWidth}`;
+        }
+    }
+    set borderWidth(value: string | number) {
+        this._setShorthandProperty("border-width", value.toString());
+        }
+
+    get borderTopWidth(): number {
+        return this._getValue(borderTopWidthProperty);
+    }
+    set borderTopWidth(value: number) {
+        this._setValue(borderTopWidthProperty, value);
+    }
+
+    get borderRightWidth(): number {
+        return this._getValue(borderRightWidthProperty);
+    }
+    set borderRightWidth(value: number) {
+        this._setValue(borderRightWidthProperty, value);
+    }
+
+    get borderBottomWidth(): number {
+        return this._getValue(borderBottomWidthProperty);
+    }
+    set borderBottomWidth(value: number) {
+        this._setValue(borderBottomWidthProperty, value);
+    }
+
+    get borderLeftWidth(): number {
+        return this._getValue(borderLeftWidthProperty);
+    }
+    set borderLeftWidth(value: number) {
+        this._setValue(borderLeftWidthProperty, value);
+    }
+
+    get borderRadius(): string | number {
+        if (this.borderTopLeftRadius === this.borderTopRightRadius && 
+            this.borderTopLeftRadius === this.borderBottomRightRadius && 
+            this.borderTopLeftRadius === this.borderBottomLeftRadius){
+                return this.borderTopLeftRadius;
+        }
+        else {
+            return `${this.borderTopLeftRadius} ${this.borderTopRightRadius} ${this.borderBottomRightRadius} ${this.borderBottomLeftRadius}`;
+        }
+    }
+    set borderRadius(value: string | number) {
+        this._setShorthandProperty("border-radius", value.toString());
+        }
+
+    get borderTopLeftRadius(): number {
+        return this._getValue(borderTopLeftRadiusProperty);
+    }
+    set borderTopLeftRadius(value: number) {
+        this._setValue(borderTopLeftRadiusProperty, value);
+    }
+
+    get borderTopRightRadius(): number {
+        return this._getValue(borderTopRightRadiusProperty);
+    }
+    set borderTopRightRadius(value: number) {
+        this._setValue(borderTopRightRadiusProperty, value);
+    }
+
+    get borderBottomRightRadius(): number {
+        return this._getValue(borderBottomRightRadiusProperty);
+    }
+    set borderBottomRightRadius(value: number) {
+        this._setValue(borderBottomRightRadiusProperty, value);
+    }
+
+    get borderBottomLeftRadius(): number {
+        return this._getValue(borderBottomLeftRadiusProperty);
+    }
+    set borderBottomLeftRadius(value: number) {
+        this._setValue(borderBottomLeftRadiusProperty, value);
     }
 
     get clipPath(): string {
@@ -1076,36 +1041,6 @@ export var placeholderColorProperty = new styleProperty.Property("placeholderCol
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
     converters.colorConverter);
 
-export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
-
-export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
-
-export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
-
-export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
-
-export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
-
-export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
-    new PropertyMetadata(0, AffectsLayout, onBorderWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
-
-export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
-
-export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
-    new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
-
-export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
-    new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
-
-export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
-    new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
-
 export var fontSizeProperty = new styleProperty.Property("fontSize", "font-size",
     new PropertyMetadata(undefined, PropertyMetadataSettings.Inheritable, onFontSizeChanged), converters.fontSizeConverter);
 
@@ -1385,4 +1320,381 @@ export var ignorePropertyHandler = new StylePropertyChangedHandler(
         // empty
     });
 
-registerNoStylingClass("Frame");
\ No newline at end of file
+registerNoStylingClass("Frame");
+
+function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
+        var style = <Style>data.object;
+        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (!Color.equals(currentBackground.color, data.newValue)) {
+        style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
+        }
+    }
+
+function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
+        var style = <Style>data.object;
+    var url: string = data.newValue;
+        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    var isValid = false;
+
+    if (types.isString(data.newValue)) {
+        var pattern: RegExp = /url\(('|")(.*?)\1\)/;
+        var match = url.match(pattern);
+        if (match && match[2]) {
+            url = match[2];
+        }
+
+        ensureImageSource();
+
+        if (utils.isDataURI(url)) {
+            var base64Data = url.split(",")[1];
+            if (types.isDefined(base64Data)) {
+                style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromBase64(base64Data)));
+                isValid = true;
+    }
+}
+        else if (utils.isFileOrResourcePath(url)) {
+            style._setValue(backgroundInternalProperty, currentBackground.withImage(imageSource.fromFileOrResource(url)));
+            isValid = true;
+        }
+        else if (url.indexOf("http") !== -1) {
+            style["_url"] = url;
+            style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
+            imageSource.fromUrl(url).then((r) => {
+                if (style && style["_url"] === url) {
+                    // Get the current background again, as it might have changed while doing the request.
+                    currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+                    style._setValue(backgroundInternalProperty, currentBackground.withImage(r));
+                }
+            });
+            isValid = true;
+        }
+    }
+
+    if (!isValid) {
+        style._setValue(backgroundInternalProperty, currentBackground.withImage(undefined));
+    }
+}
+
+function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
+        var style = <Style>data.object;
+        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.repeat) {
+        style._setValue(backgroundInternalProperty, currentBackground.withRepeat(data.newValue));
+        }
+    }
+
+function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.position) {
+        style._setValue(backgroundInternalProperty, currentBackground.withPosition(data.newValue));
+}
+}
+
+function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
+        var style = <Style>data.object;
+        var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.size) {
+        style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
+        }
+    }
+
+function onBorderTopColorPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderTopColor) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderTopColor(data.newValue));
+}
+}
+
+function onBorderRightColorPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderRightColor) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderRightColor(data.newValue));
+    }
+}
+
+function onBorderBottomColorPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderBottomColor) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomColor(data.newValue));
+    }
+}
+
+function onBorderLeftColorPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderLeftColor) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderLeftColor(data.newValue));
+    }
+}
+
+function onBorderTopWidthPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderTopWidth) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderTopWidth(data.newValue));
+    }
+}
+
+function onBorderRightWidthPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderRightWidth) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderRightWidth(data.newValue));
+    }
+}
+
+function onBorderBottomWidthPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderBottomWidth) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomWidth(data.newValue));
+    }
+}
+
+function onBorderLeftWidthPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderLeftWidth) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderLeftWidth(data.newValue));
+    }
+}
+
+function onBorderTopLeftRadiusPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderTopLeftRadius) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderTopLeftRadius(data.newValue));
+    }
+}
+
+function onBorderTopRightRadiusPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderTopRightRadius) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderTopRightRadius(data.newValue));
+    }
+}
+
+function onBorderBottomRightRadiusPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderBottomRightRadius) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomRightRadius(data.newValue));
+    }
+}
+
+function onBorderBottomLeftRadiusPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderBottomLeftRadius) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderBottomLeftRadius(data.newValue));
+    }
+        }
+
+function onClipPathPropertyChanged(data: PropertyChangeData) {
+    let style = <Style>data.object;
+    let currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.clipPath) {
+        style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
+    }
+}
+
+export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
+    new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
+
+export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
+
+export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
+
+export var backgroundRepeatProperty = new styleProperty.Property("backgroundRepeat", "background-repeat",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundRepeatPropertyChanged));
+
+export var backgroundSizeProperty = new styleProperty.Property("backgroundSize", "background-size",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundSizePropertyChanged));
+
+export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
+
+export var borderTopColorProperty = new styleProperty.Property("borderTopColor", "border-top-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderTopColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
+
+export var borderRightColorProperty = new styleProperty.Property("borderRightColor", "border-right-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderRightColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
+
+export var borderBottomColorProperty = new styleProperty.Property("borderBottomColor", "border-bottom-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderBottomColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
+
+export var borderLeftColorProperty = new styleProperty.Property("borderLeftColor", "border-left-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderLeftColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
+
+export var borderTopWidthProperty = new styleProperty.Property("borderTopWidth", "border-top-width",
+     new PropertyMetadata(0, AffectsLayout, onBorderTopWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderRightWidthProperty = new styleProperty.Property("borderRightWidth", "border-right-width",
+     new PropertyMetadata(0, AffectsLayout, onBorderRightWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderBottomWidthProperty = new styleProperty.Property("borderBottomWidth", "border-bottom-width",
+     new PropertyMetadata(0, AffectsLayout, onBorderBottomWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderLeftWidthProperty = new styleProperty.Property("borderLeftWidth", "border-left-width",
+     new PropertyMetadata(0, AffectsLayout, onBorderLeftWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderTopLeftRadiusProperty = new styleProperty.Property("borderTopLeftRadius", "border-top-left-radius",
+    new PropertyMetadata(0, AffectsLayout, onBorderTopLeftRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderTopRightRadiusProperty = new styleProperty.Property("borderTopRightRadius", "border-top-right-radius",
+    new PropertyMetadata(0, AffectsLayout, onBorderTopRightRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderBottomRightRadiusProperty = new styleProperty.Property("borderBottomRightRadius", "border-bottom-right-radius",
+    new PropertyMetadata(0, AffectsLayout, onBorderBottomRightRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderBottomLeftRadiusProperty = new styleProperty.Property("borderBottomLeftRadius", "border-bottom-left-radius",
+    new PropertyMetadata(0, AffectsLayout, onBorderBottomLeftRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
+    new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
+
+function parseThickness(value: any): definition.Thickness {
+    let result: definition.Thickness = { top: 0, right: 0, bottom: 0, left: 0 };
+    if (types.isString(value)) {
+        let arr = value.split(/[ ,]+/);
+        if (arr.length === 1){
+            let arr0 = parseInt(arr[0]);  
+            result.top = arr0;
+            result.right = arr0;
+            result.bottom = arr0;
+            result.left = arr0;
+        }
+        else if (arr.length === 2){
+            let arr0 = parseInt(arr[0]);  
+            let arr1 = parseInt(arr[1]);  
+            result.top = arr0;
+            result.right = arr1;
+            result.bottom = arr0;
+            result.left = arr1;
+        }
+        else if (arr.length === 3){
+            let arr0 = parseInt(arr[0]);  
+            let arr1 = parseInt(arr[1]);  
+            let arr2 = parseInt(arr[2]);  
+            result.top = arr0;
+            result.right = arr1;
+            result.bottom = arr2;
+            result.left = arr1;
+        }
+        else if (arr.length === 4){
+            let arr0 = parseInt(arr[0]);  
+            let arr1 = parseInt(arr[1]);  
+            let arr2 = parseInt(arr[2]);  
+            let arr3 = parseInt(arr[3]);  
+            result.top = arr0;
+            result.right = arr1;
+            result.bottom = arr2;
+            result.left = arr3;
+        }
+    } 
+    else if (types.isNumber(value)) {
+        result.top = result.right = result.bottom = result.left = value;
+    }
+    else {
+        result = value;
+    }
+
+    return result;
+}
+
+function parseBorderColor(value: any): definition.BorderColor {
+    var result: definition.BorderColor = { top: undefined, right: undefined, bottom: undefined, left: undefined };
+    try {
+        if (types.isString(value)) {
+            let arr = value.split(/[ ,]+/);
+            if (arr.length === 1){
+                let arr0 = new Color(arr[0]);
+                result.top = arr0;
+                result.right = arr0;
+                result.bottom = arr0;
+                result.left = arr0;
+            }
+            else if (arr.length === 2){
+                let arr0 = new Color(arr[0]);
+                let arr1 = new Color(arr[1]);
+                result.top = arr0;
+                result.right = arr1;
+                result.bottom = arr0;
+                result.left = arr1;
+            }
+            else if (arr.length === 3){
+                let arr0 = new Color(arr[0]);
+                let arr1 = new Color(arr[1]);
+                let arr2 = new Color(arr[2]);
+                result.top = arr0;
+                result.right = arr1;
+                result.bottom = arr2;
+                result.left = arr1;
+            }
+            else if (arr.length === 4){
+                let arr0 = new Color(arr[0]);
+                let arr1 = new Color(arr[1]);
+                let arr2 = new Color(arr[2]);
+                let arr3 = new Color(arr[3]);
+                result.top = arr0;
+                result.right = arr1;
+                result.bottom = arr2;
+                result.left = arr3;
+            }
+        } 
+        else if (value instanceof Color) {
+        result.top = result.right = result.bottom = result.left = value;
+    }
+    else {
+        result = value;
+    }
+    }
+    catch(ex){
+        if (trace.enabled) {
+            trace.write(`Error parsing border color ${value}: ${ex}'`, trace.categories.Style, trace.messageType.error);
+        }
+    }
+
+    return result;
+}
+
+function onBorderColorChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
+    let fourColors = parseBorderColor(value);
+    let array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
+    array.push({ property: borderTopColorProperty, value: fourColors.top });
+    array.push({ property: borderRightColorProperty, value: fourColors.right });
+    array.push({ property: borderBottomColorProperty, value: fourColors.bottom });
+    array.push({ property: borderLeftColorProperty, value: fourColors.left });
+    return array;
+}
+
+function onBorderWidthChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
+    var thickness = parseThickness(value);
+    var array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
+    array.push({ property: borderTopWidthProperty, value: thickness.top });
+    array.push({ property: borderRightWidthProperty, value: thickness.right });
+    array.push({ property: borderBottomWidthProperty, value: thickness.bottom });
+    array.push({ property: borderLeftWidthProperty, value: thickness.left });
+    return array;
+}
+
+function onBorderRadiusChanged(value: any): Array<styleProperty.KeyValuePair<styleProperty.Property, any>> {
+    var thickness = parseThickness(value);
+    var array = new Array<styleProperty.KeyValuePair<styleProperty.Property, any>>();
+    array.push({ property: borderTopLeftRadiusProperty, value: thickness.top });
+    array.push({ property: borderTopRightRadiusProperty, value: thickness.right });
+    array.push({ property: borderBottomRightRadiusProperty, value: thickness.bottom });
+    array.push({ property: borderBottomLeftRadiusProperty, value: thickness.left });
+    return array;
+}
+
+styleProperty.registerShorthandCallback("border-color", onBorderColorChanged);
+styleProperty.registerShorthandCallback("border-width", onBorderWidthChanged);
+styleProperty.registerShorthandCallback("border-radius", onBorderRadiusChanged);
\ No newline at end of file
diff --git a/tns-core-modules/ui/styling/styling.d.ts b/tns-core-modules/ui/styling/styling.d.ts
index 43be032a5..feb651c13 100644
--- a/tns-core-modules/ui/styling/styling.d.ts
+++ b/tns-core-modules/ui/styling/styling.d.ts
@@ -81,18 +81,77 @@
         /**
          * Gets or sets the border-color style property.
          */
-        borderColor: color.Color 
+        borderColor: string | color.Color; 
+
+        /**
+         * Gets or sets the border-top-color style property.
+         */
+        borderTopColor: color.Color; 
+
+        /**
+         * Gets or sets the border-right-color style property.
+         */
+        borderRightColor: color.Color; 
+
+        /**
+         * Gets or sets the border-bottom-color style property.
+         */
+        borderBottomColor: color.Color; 
+
+        /**
+         * Gets or sets the border-left-color style property.
+         */
+        borderLeftColor: color.Color; 
 
         /**
          * Gets or sets the border-width style property.
          */
-        borderWidth: number
+        borderWidth: string | number
+
+        /**
+         * Gets or sets the border-top-width style property.
+         */
+        borderTopWidth: number
+
+        /**
+         * Gets or sets the border-right-width style property.
+         */
+        borderRightWidth: number
+
+        /**
+         * Gets or sets the border-bottom-width style property.
+         */
+        borderBottomWidth: number
+
+        /**
+         * Gets or sets the border-left-width style property.
+         */
+        borderLeftWidth: number
 
         /**
          * Gets or sets the border-radius style property.
          */
-        borderRadius: number;
+        borderRadius: string | number;
         
+        /**
+         * Gets or sets the border-top-left-radius style property.
+         */
+        borderTopLeftRadius: number;
+
+        /**
+         * Gets or sets the border-top-right-radius style property.
+         */
+        borderTopRightRadius: number;
+
+        /**
+         * Gets or sets the border-bottm-right-radius style property.
+         */
+        borderBottomRightRadius: number;
+
+        /**
+         * Gets or sets the border-bottom-left-radius style property.
+         */
+        borderBottomLeftRadius: number;
         /**
          * Gets or sets the clip-path style property.
          */
diff --git a/tns-core-modules/ui/switch/switch.android.ts b/tns-core-modules/ui/switch/switch.android.ts
index 915d9576e..0049e98ae 100644
--- a/tns-core-modules/ui/switch/switch.android.ts
+++ b/tns-core-modules/ui/switch/switch.android.ts
@@ -81,9 +81,21 @@ export class SwitchStyler implements style.Styler {
             SwitchStyler.setBackgroundAndBorderProperty,
             SwitchStyler.resetBackgroundAndBorderProperty), "Switch");
 
-        style.registerHandler(style.borderWidthProperty, style.ignorePropertyHandler, "Switch");
-        style.registerHandler(style.borderColorProperty, style.ignorePropertyHandler, "Switch");
-        style.registerHandler(style.borderRadiusProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderTopColorProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderRightColorProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderBottomColorProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderLeftColorProperty, style.ignorePropertyHandler, "Switch");
+
+        style.registerHandler(style.borderTopWidthProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderRightWidthProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderBottomWidthProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderLeftWidthProperty, style.ignorePropertyHandler, "Switch");
+        
+        style.registerHandler(style.borderTopLeftRadiusProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderTopRightRadiusProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderBottomRightRadiusProperty, style.ignorePropertyHandler, "Switch");
+        style.registerHandler(style.borderBottomLeftRadiusProperty, style.ignorePropertyHandler, "Switch");
+
         style.registerHandler(style.backgroundInternalProperty, style.ignorePropertyHandler, "Switch");
     }
 }
diff --git a/tns-core-modules/ui/text-field/text-field.ios.ts b/tns-core-modules/ui/text-field/text-field.ios.ts
index 84fd9221d..a2968b778 100644
--- a/tns-core-modules/ui/text-field/text-field.ios.ts
+++ b/tns-core-modules/ui/text-field/text-field.ios.ts
@@ -115,9 +115,9 @@ class UITextFieldImpl extends UITextField {
         }
 
         let size = bounds.size;
-        return CGRectMake(owner.borderWidth + owner.style.paddingLeft, owner.borderWidth + owner.style.paddingTop,
-            size.width - (owner.borderWidth + owner.style.paddingLeft + owner.style.paddingRight + owner.borderWidth),
-            size.height - (owner.borderWidth + owner.style.paddingTop + owner.style.paddingBottom + owner.borderWidth)
+        return CGRectMake(owner.borderLeftWidth + owner.style.paddingLeft, owner.borderTopWidth + owner.style.paddingTop,
+            size.width - (owner.borderLeftWidth + owner.style.paddingLeft + owner.style.paddingRight + owner.borderRightWidth),
+            size.height - (owner.borderTopWidth + owner.style.paddingTop + owner.style.paddingBottom + owner.borderBottomWidth)
         );
     }
 
diff --git a/tns-core-modules/ui/text-view/text-view.ios.ts b/tns-core-modules/ui/text-view/text-view.ios.ts
index e1f75c241..2b32d234e 100644
--- a/tns-core-modules/ui/text-view/text-view.ios.ts
+++ b/tns-core-modules/ui/text-view/text-view.ios.ts
@@ -166,12 +166,81 @@ export class TextViewStyler implements style.Styler {
         }
     }
 
+    //Border
+    private static setBorderTopWidthProperty(view: View, newValue: number) {
+        TextViewStyler.setNativeBorderTopWidth(view, newValue);
+    }
+
+    private static resetBorderTopWidthProperty(view: View, nativeValue: number) {
+        TextViewStyler.setNativeBorderTopWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderTopWidth(view: View, newValue: number) {
+        let nativeTextView = <UITextView>view._nativeView; 
+        let top = view.style.paddingTop + newValue;
+        let left = nativeTextView.textContainerInset.left;
+        let bottom = nativeTextView.textContainerInset.bottom;
+        let right = nativeTextView.textContainerInset.right;
+        nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static setBorderRightWidthProperty(view: View, newValue: number) {
+        TextViewStyler.setNativeBorderRightWidth(view, newValue);
+    }
+
+    private static resetBorderRightWidthProperty(view: View, nativeValue: number) {
+        TextViewStyler.setNativeBorderRightWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderRightWidth(view: View, newValue: number) {
+        let nativeTextView = <UITextView>view._nativeView; 
+        let top = nativeTextView.textContainerInset.top;
+        let left = nativeTextView.textContainerInset.left;
+        let bottom = nativeTextView.textContainerInset.bottom;
+        let right = view.style.paddingRight + newValue;
+        nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static setBorderBottomWidthProperty(view: View, newValue: number) {
+        TextViewStyler.setNativeBorderBottomWidth(view, newValue);
+    }
+
+    private static resetBorderBottomWidthProperty(view: View, nativeValue: number) {
+        TextViewStyler.setNativeBorderBottomWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderBottomWidth(view: View, newValue: number) {
+        let nativeTextView = <UITextView>view._nativeView; 
+        let top = nativeTextView.textContainerInset.top;
+        let left = nativeTextView.textContainerInset.left;
+        let bottom = view.style.paddingBottom + newValue;
+        let right = nativeTextView.textContainerInset.right;
+        nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
+    private static setBorderLeftWidthProperty(view: View, newValue: number) {
+        TextViewStyler.setNativeBorderLeftWidth(view, newValue);
+    }
+
+    private static resetBorderLeftWidthProperty(view: View, nativeValue: number) {
+        TextViewStyler.setNativeBorderLeftWidth(view, nativeValue);
+    }
+
+    private static setNativeBorderLeftWidth(view: View, newValue: number) {
+        let nativeTextView = <UITextView>view._nativeView; 
+        let top = nativeTextView.textContainerInset.top;
+        let left = view.style.paddingLeft + newValue;
+        let bottom = nativeTextView.textContainerInset.bottom;
+        let right = nativeTextView.textContainerInset.right;
+        nativeTextView.textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
+    }
+
     // Padding
     private static setPaddingProperty(view: View, newValue: any) {
-        var top = newValue.top + view.borderWidth;
-        var left = newValue.left + view.borderWidth;
-        var bottom = newValue.bottom + view.borderWidth;
-        var right = newValue.right + view.borderWidth;
+        var top = newValue.top + view.borderTopWidth;
+        var left = newValue.left + view.borderLeftWidth;
+        var bottom = newValue.bottom + view.borderBottomWidth;
+        var right = newValue.right + view.borderRightWidth;
         (<UITextView>view._nativeView).textContainerInset = UIEdgeInsetsFromString(`{${top},${left},${bottom},${right}}`);
     }
 
@@ -185,6 +254,19 @@ export class TextViewStyler implements style.Styler {
             TextViewStyler.resetColorProperty,
             TextViewStyler.getNativeColorValue), "TextView");
 
+        style.registerHandler(style.borderTopWidthProperty, new style.StylePropertyChangedHandler(
+            TextViewStyler.setBorderTopWidthProperty,
+            TextViewStyler.resetBorderTopWidthProperty), "TextView");
+        style.registerHandler(style.borderRightWidthProperty, new style.StylePropertyChangedHandler(
+            TextViewStyler.setBorderRightWidthProperty,
+            TextViewStyler.resetBorderRightWidthProperty), "TextView");
+        style.registerHandler(style.borderBottomWidthProperty, new style.StylePropertyChangedHandler(
+            TextViewStyler.setBorderBottomWidthProperty,
+            TextViewStyler.resetBorderBottomWidthProperty), "TextView");
+        style.registerHandler(style.borderLeftWidthProperty, new style.StylePropertyChangedHandler(
+            TextViewStyler.setBorderLeftWidthProperty,
+            TextViewStyler.resetBorderLeftWidthProperty), "TextView");
+
         style.registerHandler(style.nativePaddingsProperty, new style.StylePropertyChangedHandler(
             TextViewStyler.setPaddingProperty,
             TextViewStyler.resetPaddingProperty), "TextView");