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.

next


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

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

<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>
</p>


`,
styles:[`
.angular-2-css-border-1 {
border-style: dotted;
border-width: 7px;
border-color: blue;
color:#000000;
opacity: 0.8;
}

.angular-2-css-border-2{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

.angular-2-css-border-3{
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 !