Angular 2 CSS Border

Angular 2 CSS Border is a property that allows us to set the color, width, and style of an HTML element. (e.g. div)

angular 2 css border
angular 2 css border


Try it yourself,Live Example

try angular 2 css border
try angular 2 css border


You need to set “border-style” to make the other properties work.


* Created by Tareq Boulakjar. from
import {Component} from 'angular2/core';

selector: 'my-app',
template: `<h3 class="angular-2-css-border-1">Angular 2 CSS border Property Example </h3>
<p class="angular-2-css-border-2">
We explain CSS Border Property.  The property syntax:<br>

<p class="angular-2-css-border-3">
border-top-style: groove;<br>
border-right-style: ridge;<br>
border-bottom-style: inset;<br>
border-left-style: outset;<br>
border-width: 8px;<br>
border-color: blue;<br>

.angular-2-css-border-1 {
border-style: dotted;
border-width: 7px;
border-color: blue;
opacity: 0.8;

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

border-top-style: groove;
border-right-style: ridge;
border-bottom-style: inset;
border-left-style: outset;
border-width: 8px;
border-color: blue;



export class Angular2CSSBorderComponent { }


Done !