Search within TutorialsPark

CSS Borders


Use CSS border to create boundry around elements of various colors, thickness and line styles.


CSS Border-Style

Demo: CSS Border-Style

Continuous effort - not strength or intelligence - is the key to unlocking our potential.

border-style:

1. The CSS border-style property enables you to control the style of the border.

Values of CSS border-style

Value Description Appearance
dotted Border made up of a series of square dots

dotted

dashed Border made up of a series of short-lines

dashed

solid A plain solid line

solid

double Border made up of two solid lines

double

groove Border appears to be carved into the page

groove

ridge Border appears to stick out from the page

ridge

inset Border appears to be embedded into the page

inset

outset The Border appears to be comming out of the screen

outset

none No Border is shown at all

none

inherit Inherits border-style from the parent element

inherit


Example: CSS - border-style

Give it a TRY! » Note: The appearance of border-style depends upon the color used, avoid border-color as black.


CSS Border: border-width

You have enemies? Good. That means you've stood up for something, sometime in your life.

border-width:

1. The CSS property border-width enables you to control the width of the border.

2. The value set as the border-width can be expressed in length units(px, em, cm), or by using keywords thin, medium, thick.

3. You can also apply border-width at once just like padding, margin.

Eg: border-width: 1px 2px 3px 4px; clockwise starting from top (top, right, bottom, left).

Example: CSS Border border-width

Give it a TRY! » Note: The property border-width can be expressed in percentages(%).


CSS Border: border-color

You have enemies? Good. That means you've stood up for something, sometime in your life.

border-width:

1. The color of your border can be defined using CSS property of border-color.

2. Color can be expressed using RGBa values, hex values , HSL or color names.

3. You can express color values for individual sides using shorthand :

Eg: border-width: red, blue, green, yellow; clockwise starting from the top (top, right, bottom, left)

Example:CSS Border border-color

Give it a TRY! » Note: Colors can be set using keywords, Hex, rgba() or hsla() colors .


CSS Border: Using Shorthand

1. Using the CSS shorthand border property you can set border-width , border-type and border-color all in a single declaration

Eg: border: 2px solid blue the order is (border-width, border-type, border-color)

Table:CSS Border shorthand

property Description value
border Set Borders for all the edges at once
(width, style, color)
border-top
border-right
border-bottom
border-left
Set border for individual edges
(width, style, color)

Example:CSS Border border

Give it a TRY! » Note: Incase of a conflict between the styles, the latest one is applicable .


CSS Border: Specific Borders for Individual Sides

You can define extremely specific borders for individual sides, using the table below

Table:CSS Border Specific Individual Borders

property Description value
border-top-width
border-top-style
border-top-color
Set the top Border
Same as generic properties
border-right-width
border-right-style
border-right-color
Set the right border
Same as generic properties
border-bottom-width
border-bottom-style
border-bottom-color
Set the bottom border
Same as generic properties
border-left-width
border-left-style
border-left-color
Set the left border
Same as generic properties

Example:CSS Specific Borders for individual sides

Give it a TRY! » Note: Incase of a conflict between the styles, the latest one is applicable .