CSS Border and Property

CSS Border ?

The CSS border properties allow you to define the border area of a box. The border can either be a predefined style like, solid line, double line, dotted line, etc.

The CSS border properties allow you to specify the style, width, and border of an element's color.

The border of an HTML element can be manipulated with different border, color, etc. using the css border properties

However, none of the other css border properties will have any effect unless the border-style property is set.

The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border


Example:

Result:


A Heading with a dotted border

A div element with a dotted border.
This element has a margin of 70px.
This div element has a top margin of 100px,
a right margin of 150px, a bottom margin of
100px, and a left margin of 80px.

CSS BORDER RADIUS:

The CSS border-radius property defines the radius of an element's corners, This property allows you to add rounded corners to elements

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.


Example :

Result :

Rounded corners for an element with a specified background color:

Rounded corners!

Rounded corners for an element with a border:

Rounded corners!

Rounded corners for an element with a background image:

Rounded corners!