CSS Border - CSVeda

Every element in CSS is considered as a box. So, every element that you define in your HTML code has a border that can be manipulated by using CSS Border properties. CSS Border properties are used to define the look of width, style and color of the borders.

CSS border properties can be applied with STYLE attribute of any HTML element. It can also be defined in external CSS file with the HTML elements that you need in your web pages. You can define border for tables, paragraphs, images, headings and other tags .

CSS Border Properties

Border Style

The BORDER-STYLE property of CSS border is used to define how the border will look like. It controls the appearance of border like whether it will be solid, dotted, dashed etc. You can modify any border of any HTML element.

The allowed values for Border style are none, dotted, dashed, solid, double, groove, ridge, inset, outset and hidden.

Syntax

You can also apply BORDER-STYLE property for specific border of the element using the name of that side. BORDER-TOP-STYLE, BORDER-BOTTOM-STYLE, BORDER-LEFT-STYLE and BORDER-RIGHT-STYLE properties are used to set border styles for top, bottom, left and right border styles respectively.

Alternatively you can use BORDER-STYLE to set all the four border widths. The sequence of borders for single statement is top, right, bottom and left.

Border Width

The BORDER-WIDTH property of an element is used to control the width of the border. The allowed values are in pixels, percentage or one defined value from THIN, THICK or MEDIUM.

Syntax

< HTML element tag STYLE= ”BORDER -WIDTH: num px|%age|THIN|THICK|MEDIUM;”>

You can also apply BORDER-WIDTH property on a specific border of the element using the name of that side. BORDER-TOP-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-LEFT-WIDTH and BORDER-RIGHT-WIDTH properties are used to set border widths for top, bottom, left and right borders respectively.

Alternatively you can use BORDER-WIDTH to set all the four border widths. The sequence of borders for this is top, right, bottom and left.

Border Color

The BORDER-COLOR property of CSS border is used to set the color of one or more borders of an HTML element. The allowed values are color-name, RGB color or Hexadecimal color code.

Syntax

You can also apply BORDER-COLOR property on a specific border of the element using the name of that side. BORDER-TOP-COLOR, BORDER-BOTTOM-COLOR, BORDER-LEFT-COLOR and BORDER-RIGHT-COLOR properties are used to set values for top, bottom, left and right border colors respectively.

Alternatively you can use BORDER-COLOR to set color of all the four borders. The sequence of borders for this is top, right, bottom and left.

BORDER

BORDER property can be used as single property to set values for style, width and color property in single statement. The order of values of these properties is style, width and color. You can also set values for individual border sides using BORDER-LEFT, BORDER-RIGHT, BORDER-TOP or BORDER-BOTTOM properties.

Example

<HTML>
<BODY>
<H4 STYLE="BORDER-STYLE:SOLID">The Solid Border</H4>
<H4 STYLE="BORDER-STYLE:DOTTED">The Dotted Border</H4>
<H4 STYLE="BORDER-STYLE:DASHED">The Dashed Border</H4>
<H4 STYLE="BORDER-STYLE:DOUBLE">The Double Border</H4>
<H4 STYLE="BORDER-STYLE:RIDGE">The Ridge Border</H4>

<H4 STYLE="BORDER-STYLE:SOLID;BORDER-WIDTH:30px">The 30px Border</H4>
<H4 STYLE="BORDER-STYLE:SOLID;BORDER-WIDTH:5%">The 5% Border</H4>
<H4 STYLE="BORDER-STYLE:SOLID;BORDER-WIDTH:THICK">The Thick Border</H4>

<H4 STYLE="BORDER-STYLE:SOLID;BORDER-WIDTH:10px; BORDER-COLOR:green;">The color name Border</H4>
<H4 STYLE="BORDER-STYLE:SOLID;BORDER-WIDTH:10px; BORDER-COLOR:#GGAA55;">The Hexadecimal color code Border</H4>
<H4 STYLE="BORDER-STYLE:SOLID;BORDER-WIDTH:10px; BORDER-COLOR:RGB(0,45,67);">The RGB color Border</H4>

<H4 STYLE="BORDER: 5px inset pink">The Border property use</H4>

<H4 STYLE="BORDER-LEFT: 3px inset pink; BORDER-TOP: 10px SOLID green; BORDER-BOTTOM: 10px DOUBLE blue; BORDER-RIGHT: 20px DOTTED RGB(0,45,67);">The side wise use of Border property</H4>
</BODY>
</HTML>