WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

CSS Border

Previous Next

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