Tutorial

Forum

Sign Up

log In

CSS
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;
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.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.