In CSS, the border property allows you to define the appearance of an element's border. You can customize its color, style, and width, among other properties.

Syntax:

border: <width> <style> <color>;

Width: Thickness of the border (e.g., 1px, 2em, etc.).

Style: The type of border (e.g., solid, dashed, dotted, etc.).

Color: The color of the border (e.g., red, #3498db, rgb(52, 152, 219)).

Example

div {

border: 2px solid #3498db;

}

Try it yourself

Border Width:

You can specify the width of the border in various units (px, em, %, etc.). You can also use keywords like thin, medium, or thick.

Syntax:

border-width: value | thin | medium | thick;

Hello World!

This page has a light blue border color!

Example

div {

border-width: 5px; /* Or border-width: thin | medium | thick */

}

Try it yourself

Border Styles:

The border-style property specifies the style of the borders.

Syntax:

border-style: solid | dashed | dotted | double | groove | ridge | inset | outset | none;

Example

.solid{

border-style : solid;

}

.dashed{

border-style : dashed;

}

.dotted{

border-style : dotted;

}

.double{

border-style : double;

}

.groove{

border-style : groove;

}

.ridge{

border-style : ridge;

}

.inset{

border-style : inset;

}

.outset{

border-style : outset;

}

Try it yourself

Border Color:

You can specify the color of the border using color names, hexadecimal values, RGB, RGBA, HSL, etc.

Syntax:

border-style: names | hexadecimal values | RGB | RGBA | HSL;

Example

div {

border-color: red; /* Or #3498db | rgb(52, 152, 219) */

}

Try it yourself

Individual Border Sides:

You can define borders for individual sides using the following properties:

border-top
border-right
border-bottom
border-left

Example

div {

border-top: 5px solid red;

border-right: 2px dashed green;

border-bottom: 3px dotted blue;

border-left: 4px solid orange;

}

Try it yourself

Shorthand for Individual Sides:

You can also use shorthand notation for specifying the width, style, and color of borders for individual sides.

Example

div {

border: 5px solid red;

border-bottom: 10px dashed blue; /* Overriding only the bottom border */

}

Try it yourself

Border Radius (Rounded Corners):

You can use the border-radius property to create rounded corners. This can be applied uniformly to all corners or individually.

Example

div {

border: 2px solid black;

border-radius: 10px; /* All corners rounded */

}

.radius {

border: 2px solid black;

border-radius: 10px 0 10px 0; /* Top-left and bottom-right rounded */

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.