CSS Borders

Sneha Mallik
Last Updated: May 13, 2022
Difficulty Level :
EASY

Introduction 

 

In CSS(Cascading Style Sheet), the ‘border’ property is important for building a web page. It helps set up the border for an element, or we can say that it provides a framework for the component, which helps emphasize the element. 

 

It has different values such as:

  • Style
  • Width
  • Color

which helps in specifying the border property.

 

Border Declaration in CSS

 

border : solid 4px red;

 

Here, we are using the border property to define the outer boundary of the element or content. ‘solid’ represents the style of the border, ‘4px’ means the width of the frame, and ‘red’ defines the color of the border.

 

Border-Style in CSS

 

Let us look into some of the different styles of the border property.

 

  1. border-style: dashed;

 

HTML:

<p class = "dashed"> Let us try the dashed border! </p>

 

CSS:

p.dashed {border-style: dashed;}

 

OUTPUT:

 

  1. border-style: dotted;

 

HTML:

<p class = "dotted"> Let us try the dotted border! </p>

 

CSS:

p.dotted {border-style: dotted;}

 

OUTPUT:

 

  1. border-style: double;

 

HTML:

<p class = "double"> Here is the double border! </p>

 

CSS:

p.double {border-style: double;}

 

OUTPUT:

 

  1. border-style: solid;

 

HTML:

<p class = "solid"> Let us try the solid border! </p>

 

CSS:

p.solid {border-style: solid;}

 

OUTPUT:

 

  1. border-style: ridge;

 

HTML:

<p class = "ridge"> Here is the ridge border! </p>

 

CSS:

p.ridge {border-style: ridge;}

 

OUTPUT:

 

 

  1. border-style: groove;

 

HTML:

<p class = "groove"> Let us try the groove border! </p>

 

CSS:

p.groove {border-style: groove;}

 

OUTPUT:

 

 

  1. border-style: inset;

 

HTML:

<p class = "inset"> Let us try the inset border! </p>

 

CSS:

p.inset {border-style: inset;}

 

OUTPUT:

 

 

  1. border-style: outset;

 

HTML:

<p class = "outset"> Here is the outset border! </p>

 

CSS:

p.outset {border-style: outset;}

 

OUTPUT:

 

 

  1. border-style: hidden;

 

HTML:

<p class = "hidden"> The border is hidden. </p>

 

CSS:

p.hidden {border-style: hidden;}

 

OUTPUT:

 

 

  1. border-style: none;

 

HTML:

<p class = "none"> Let us try the border-style 'NONE'. </p>

 

CSS:

p.none {border-style: none;}

 

OUTPUT:

 

 

  1. border-style: dashed double dotted solid;

 

HTML:

<p class = "mixed"> Let us try the mixed border! </p>

 

CSS:

p.mixed {border-style: dashed double dotted solid;}

 

OUTPUT:

 

 

Border-Width in CSS

 

Border-width property is used to define the width of the four borders of the element. The thickness of the frame is indicated in the border-width property.

 

The border-width can be specified in different sizes, such as:

  • px
  • pt
  • cm
  • em, etc.

 

For example:

 

HTML:

<p class = "one"> Let us try the border-width having 5px. </p>

 

CSS:

p.one {
    border-style: solid;
    border-width5px;
}

 

OUTPUT:

 

 

The width property can also be specified by their predefined values:

  • Thin
  • Medium
  • Thick

 

For example:

 

HTML:

<p class = "two"> Border-width is medium! </p>

 

CSS:

p.two {
    border-style: dashed;
    border-width: medium;
}

 

OUTPUT:

 

 

NOTE: Always remember to include the border-style property while using border-width property! It does not work if the border-style property is not specified.

 

Border-Color in CSS

 

Border-color property is used to define the color of the four borders of the element. The color of the frame is indicated in the border-color property.

There are different properties of border-color property:

  • Color Name

Example: “border-color: red;”

 

  • Color Hex Code

Example: “border-color: #ff0000;”

 

  • Color Rgb Code

Example: “border-color: rgb(255, 0, 0);”

 

  • Color HSL value

Example: “border-color: hsl(0, 100%, 50%);”

 

  • Transparent property

This property helps in making the border-color transparent.

 

For example:

 

HTML:

<p class = "one"> Border-color is dashed blue. </p>

 

CSS:

p.one {
    border-style: dashed;
    border-width: medium;
    border-color: blue;
}

 

OUTPUT:

Second example:

 

HTML:

<p class = "one"> Mixed border colors </p>

 

CSS:

p.one {
    border-style: solid;
    border-width10px;
    border-top-color: yellow;
    border-right-color: blue;
    border-bottom-color: red;
    border-left-color: black;
    text-align: center;
}

 

OUTPUT:

Frequently Asked Questions

 

  1. What is meant by border radius in CSS?

 

The border-radius property helps in rounding up the corners of the border on HTML elements which gives a nice finishing touch if you are making a box.

 

For example:

 

HTML:

<p class = "one"> Border is rounded at corners. </p>

 

CSS:

p.one {
    border1px solid brown;
    border-radius20px;
    text-align: center;
    background-color: yellow;
}

 

OUTPUT:

 

  1. How is border property useful in web development?

 

The border property is helpful in web development as it helps in differentiating between content and the margin. It provides a specific edge to the page, and we can also use borders around specific contents to make it stand out from the rest.

 

  1. Difference between border and margin in CSS.

 

A border in CSS has padding and content inside it. It has the border-color property too. While in the case of margin, the margin is transparent and generally defined as the outer space of an element’s border.

 

  1. What are the different ways to define border-image-width property?

 

The different ways to define a border-image-width property:

 

  • Keyword value, i.e., border-image-width: auto;
  • Length value, i.e., border-image-width: 2rem;
  • Percentage value, i.e., border-image-width: 50%;
  • Number value, i.e., border-image-width: 2;
  • Vertical | Horizontal, i.e., border-image-width:4em 2em;
  • Top | Horizontal | Bottom, i.e., border-image-width: 6% 10% 12%;
  • Top | Right | Bottom | Left, i.e., border-image-width: 6% 2em 15% auto;
  • Predefined value, such as, “inherit”, “initial”, “revert”, “unset”

 

Key Takeaways

 

In this blog, we learned about border property in CSS and looked upon different types of borders used in CSS. We learned about the three properties: style, width and color of the border. We also came to know about the border-radius.

 

Enroll in our Web Development Course to understand CSS properties in Web Development with real-life projects.

 

Credits: GIPHY

 

Happy Developing!

 

By Sneha Mallik

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think