# CSS Borders

# **CSS Borders**

The [CSS](https://www.javatpoint.com/css-tutorial) border properties are used to specify the style, color, and size of the border of an element. The CSS border properties are given below

- border-style
- border-color
- border-width
- border-radius

## 1. border-style 👇

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

Example👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669219959775/sxlSkGBje.png align="left")

CSS Border Style 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669219982315/4E03zNs6K.png align="left")

We can also use multiple CSS Border styles in one tag👇 (Clock-Wise)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220014377/-b7AS5JqA.png align="left")

## 2. border-color 👇

The `border-color` property is used to set the color of the four borders.

Example 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220044591/aXMRZl_aU.png align="left")

Multiple border-color 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220073513/DzeFcYjWB.png align="left")

Example of using multiple border colors in CSS 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220097402/fo4lOW_tm.png align="left")

## 3. border-**Width** 👇

The `border-width` property specifies the width of the four borders.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220120821/k624h-U-3.png align="left")

Specific Side Widths 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220143805/PKVvaK_am.png align="left")

Example of border-Width 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220167629/5nTv5FJ-w.png align="left")

## 4. border-radius 👇

The `border-radius` property is used to add rounded borders to an element

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220194167/Q3Q5GL4Tv.png align="left")

For Multiple border-radius values 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220219049/OC7Xj2Vxg.png align="left")

## **CSS Shorthand Border Property** 👇

To shorten the code, it is also possible to specify all the individual border properties in one property.

The `border` property is a shorthand property for the following individual border properties:

- `border-width`
- `border-style` (required)
- `border-color`

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220243161/XODa4HdG8.png align="left")

Example 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669220269885/QZ7maVKkW.png align="left")

-----------------------------------------------------------------------------------------------
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")> 
Download our HTML & CSS Visual Treat! ebook Here: 
[Click here](https://codemarch.gumroad.com/l/hxazr)