Borders in CSS - II | Web Development

In the previous article, we learned about types of CSS borders and the width of borders. In this article, we will

CSS Border Color

This property is used to set the color of borders in CSS. We can color the border using the ways that we learned in Colors in CSS | Web Development (using a color name, using RGB color, using hex color). if we do not set any color to the border then it inherits the color of the element that it surrounds.

Example:

#para1 {
        border-style: solid;
        border-color: green;
        }

#para1 {
        border-style: solid;
        border-color: rgb(0, 176, 240);
        }

#para1 {
        border-style: solid;
        border-color: #eaf215;
        }

Output:

This is a paragraph with green color solid border

This is a paragraph with rgb(0, 176, 240) color solid border

This is a paragraph with #eaf215 color solid border

In the above example, all sides of the border have the same color. We can also add a different color to each side same as the border width.

Example:

#para1 {
        border-style: solid;
        border-width:5px;
        border-color: green red; /* green on top and bottom, red on right and left */
        }

#para1 {
        border-style: solid;
        border-width:5px;
        border-color: blue pink brown; /* blue on top, pink on right and left, brown on bottom */
        }

#para1 {
        border-style: solid;
        border-width:5px;
        border-color: black yellow violet cyan; /* black on top, yellow on right, violet on bottom, cyan on left */
        }

Output:

This is a paragraph with green color on top and bottom and red color on right and left border

This is a paragraph with blue color on top, pink color on right and left, brown color on bottom border

This is a paragraph with black color on top, yellow color on right, violet color on bottom, cyan color on left border

CSS Borders Shorthand

Border shorthand property is an alternative for border width, border style, and border color. We can write them all together using this border property to shorten the code.

Example:

#para1 {
        border: 5px solid green;
        }

#para2 {
        border-bottom: 5px solid red;
        background-color: grey;
        }

#para3 {
        border-left: 5px solid blue;
        background-color: grey;
        }

Output:

This is a paragraph with green color solid border

This is a paragraph with red color solid bottom-border

This is a paragraph with blue color solid left-border

Rounded Borders

We can make the corners of the border rounded using the border-radius property.

Example:

#para1 {
        border:5px solid green;
        }

#para1 {
        border:5px solid green;
        border-radius:10px;
        }

#para1 {
        border:5px solid green;
        border-radius:20px;
        }

Output:

This is a paragraph with green color solid normal border

This is a paragraph with green color solid rounded border

That’s all about borders in CSS.

Hope this article will guide you to recognize all about the Borders in CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.