Border Property in CSS

Submitted by argie on Saturday, March 22, 2014 - 13:53.

The CSS border property allows the user to specify the border width, style and color of an element's border. This property is essential in web designing because it allows the designer to design and beautify the elements. There are two syntax to define element border;

First

border: border-with border-style border-color;

Second

border-with: border with; border-style: style of the border; border-color: color of the border;

border-with

The border-with property is used to define the with of the border.Border with can be define in px, em, %, thin, medium, and thick.

border-color

The border-color property is used to define the color of the border.Border with can be define using transparent, color name, RGB, or HEX.

border-Style

The border-style property specifies what kind of border to display. There are many value of border-style it includes none,dashed, solid, double, grove, ridge, inset, and outset. To understand how this two syntax work, follow the instructions bellow.

Using the First Syntax

The code bellow will till us how the first syntax work. Copy the code bellow and save it as "index.html".

<style>
#first {
        width: 100px;
        height: 100px;
        border: 1px solid red;
}
</style>
<div id="first">First</div>

Using the Second Syntax

The code bellow will till us how the second syntax work. Copy the code bellow and paste in "index.html".

<style>
#secondsyntax {
        width: 100px;
        height: 100px;
        border-with: 1px;
        border-style: solid;
        border-color: red;
}
</style>
<div id="secondsyntax">Second</div>

Make sure you follow the instructions properly in order to run this tutorial.

Add new comment

32 views