` element: ```xml

This is a div with a border.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14191046/image-77.png) **In this example:** - We define a CSS class called `.border-div`. - Inside this class, we set the `border` property to `2px solid #336699`, which creates a border with a width of 2 pixels and a solid blue color (`#336699`). - The `

` element with the class `.border-div` has this border applied. You can adjust the `border-width` property to specify the desired width for your border. It can be set in pixels, ems, rems, or other valid CSS units, depending on your design requirements. **2. Border Style (`border-style`):** You can define the style of the border, choosing from options like `solid`, `dotted`, `dashed`, `double`, `groove`, `ridge`, and more. You can control the border style of HTML elements using the `border-style` property in CSS. Here’s an example of how to set the border style for a `

` element: ```xml

This is a div with a solid border.

This is a div with a dashed border.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/14191248/image-78.png) **In this example:** - We define two CSS classes: `.border-div` and `.dashed-border-div`. - For `.border-div`, we set the `border` property to `2px solid #336699`, which creates a border with a solid style. - For `.dashed-border-div`, we set the `border` property to `2px dashed #ff6633`, which creates a border with a dashed style and a different color. Both `

` elements have borders applied with different styles. You can adjust the `border-style` property to specify other styles like `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`, or any other valid border style according to your design requirements. **3. Border Color (`border-color`):** - CSS allows you to set the color of the border. You can use color names, hexadecimal codes, RGB values, or HSL values. - Example: `border-color: #0073e6;` **4. Border Shorthand (`border`):** The `border` property combines the width, style, and color settings into a single shorthand declaration. You can control the border color of HTML elements using the `border-color` property in CSS. Here’s an example of how to set the border color for a `

` element: ```xml

This is a div with a border color of #336699.

This is a div with a border color of #ff6633.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/15092203/image-79.png) **In this example:** - We define two CSS classes: `.border-div` and `.colored-border-div`. - For `.border-div`, we set the `border` property to `2px solid #336699`, which creates a border with a color of `#336699`. - For `.colored-border-div`, we set the `border` property to `2px solid #ff6633`, which creates a border with a different color of `#ff6633`. Both `

` elements have borders applied with different colors. You can adjust the `border-color` property to specify any valid color value according to your design requirements. **5. Border Radius (`border-radius`):** - CSS enables you to round the corners of elements using the `border-radius` property. It can create square, rounded, or elliptical corners. - Example: `border-radius: 10px;` **6. Border Image (`border-image`):** You can use images as borders with the `border-image` property. This allows for highly customized border designs. The `border-image` property in CSS is used to apply an image as a border to an HTML element. Here’s an example of how to use the `border-image` property on a `

` element: ```xml

This is a div with a border image.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/15092439/image-81.png) **In this example:** - We create a CSS class called `.border-image-div`. - For the border, we start with a `10px` solid transparent border. - We use the `border-image` property to specify an image (in this case, ‘border-image.png’) that will be used as the border. The values `30 30 30 30` specify the slicing of the image (top, right, bottom, left) and `round` indicates how the image should be repeated to fit the border. Make sure to replace `'border-image.png'` with the actual path to your border image file. This will apply the specified image as a border around the `

` element. You can adjust the border width, image path, and slicing values to achieve your desired border image effect. **7. Individual Border Sides (`border-top`, `border-right`, `border-bottom`, `border-left`):** CSS allows you to set different border properties for each side of an element. You can set individual border styles for each side of an HTML element using the `border-top`, `border-right`, `border-bottom`, and `border-left` properties in CSS. Here’s an example: ```xml

This div has individual border styles for each side.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/15092906/image-82.png) **In this example:** - We create a CSS class called `.border-sides-div`. - We set individual border styles for each side of the `

` element using the `border-top`, `border-right`, `border-bottom`, and `border-left` properties. - Each border style includes the border width (in pixels), style (e.g., `solid`, `dashed`, `double`, `groove`), and color (specified as a color code). This results in a `

` element with different border styles for each side. You can adjust the border properties, including width, style, and color, to create the desired appearance for your element. **8. Removing Borders (`border: none;`):** You can completely remove borders from an element by setting `border` to `none`. To remove all borders from an HTML element, you can use the `border` property and set it to `none`. Here’s an example: ```xml

This div has no borders.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/15093451/image-84.png) **In this example:** - We create a CSS class called `.no-border-div`. - We set the `border` property to `none`, which removes all borders from the `

` element. - For illustration purposes, we also set a background color (`#f2f2f2`) to make it clear that the borders have been removed. This results in a `

` element with no visible borders. You can use this approach to remove borders from any HTML element by applying the `border: none;` property to that element’s CSS rule. Borders are versatile in web design, and their customization options enable you to create visually appealing layouts, separate content, and add depth to your web pages. Carefully chosen border styles and colors can significantly impact the overall aesthetics and user experience of your website. ### Related posts: [CSS – Table](https://blog.khanwaseem.com/css-table/) [CSS – Outlines](https://blog.khanwaseem.com/css-outlines/) [CSS – Pseudo Classes](https://blog.khanwaseem.com/css-pseudo-classes/) [CSS – Text](https://blog.khanwaseem.com/css-text/) Powered by [YARPP](https://yarpp.com).