WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

CSS Border

~1 min read · CSS
On this page
❮ 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 ❯