Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Border Style Properties
3.
Border Color Properties
4.
Border Width Properties
5.
Border Shorthand
6.
Logical Properties
7.
Rounded Borders
8.
Border Images
8.1.
Border Image Source
8.2.
Border Image Slice
8.3.
Border Image Repeat
9.
Frequently Asked Questions
9.1.
What are the properties of CSS borders?
9.2.
How can I add a simple line to my webpage?
9.3.
What is the use of the border-image property?
9.4.
What are the different values that we can give for the border-style property?
10.
Key Takeaways
Last Updated: Mar 27, 2024

Using Borders In CSS

Introduction

In CSS, the border property can be used to provide frames to the elements or boxes. This CSS property allows you to style, size and colour the element's border. Using the border property, we can create a variety of frames for your elements, enhancing the appearance of your webpage.

Border Style Properties

The border-style must be defined for the border to appear. They specify the type of border to display. The available values for this property are:

  • border-style: dotted;

HTML: 

<div style="border-style: dotted">

     <p> This is a preview of dotted border-style.</p>

</div>   

 

  • border-style: dashed;

HTML: 

<div style="border-style: dashed">

     <p> This is a preview of dashed border-style.</p>

</div>   

 

  • border-style: solid;

HTML: 

<div style="border-style: solid">

     <p> This is a preview of solid border-style.</p>

</div>   

 

  • border-style: double;

HTML: 

<div style="border-style: double">

     <p> This is a preview of double border-style.</p>

</div>   

  • border-style: groove;

HTML: 

<div style="border-style: groove">

     <p> This is a preview of groove border-style.</p>

</div>   

  • border-style: ridge;

HTML: 

<div style="border-style: ridge">

     <p> This is a preview of ridge border-style.</p>

</div>   

  • border-style: inset;

HTML: 

<div style="border-style: inset">

     <p> This is a preview of inset border-style.</p>

</div>   

  •  border-style: outset;

HTML: 

<div style="border-style: outset">

     <p> This is a preview of outset border-style.</p>

</div>   

 

The appearance of specific values like ridge, inset, outset, and groove can vary slightly depending on the browser. Hence, it is recommended to test your page in different browsers like Chrome, Firefox, Safari etc.

The border-style property can be applied on one side explicitly by using border-top-styleborder-right-styleborder-left-style and border-bottom-style.

 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Border Color Properties

This property is used to set the colour of the four borders. By default, it uses current-color, the box’s current text colour. 

The following code will produce a box with text color and the border color as red. 

.container{

    colorred;

    bordersolid;

}

 

The following code will produce a box with text colour as red and the border colour as blue.

.container{

    colorred;

    bordersolid blue;

}

The border-color property can be applied on one side explicitly by using border-top-colorborder-right-colorborder-left-color and border-bottom-color.

 

Border Width Properties

The border-width property determines the thickness of the four lines in the border. The default value of this property is medium.  Without defining a border style, the border width will not be visible. 

The predefined values for this property are: thinmedium and thick.

Rather than using the predefined values, you can also use specific values in em, px, pt, cm, rem, % etc.

  •  border-width: thin;

<div style="border-width: thin; border-style: solid;">

     <p>Thin border width.</p>

</div>

  •  border-width: medium;

<div style="border-width: medium; border-style: solid;">

     <p>Medium border width.</p>

</div>

  •  border-width: thick;

<div style="border-width: thick; border-style: solid;">

     <p>Thick border width.</p>

</div>

 

  • Specific Value

<div style="border-width: 5px; border-style: solid;">

    <p>Border width=5px.</p>

</div>

 

Border Shorthand

The border shorthand property allows us to define all parts of the border in one declaration.

 

.container{border1px dotted red;}

 

In border shorthand, the values given are in the order border-widthborder-style and border-color.

 

Logical Properties

Instead of explicitly defining the border properties for top, bottom, left or right, you could apply logical properties using block flow and inline flow. 

 

HTML:

<body>

  <div class="container">

    <p>Applying Logical properties to Border.</p>

  </div>

</body>

 

CSS:

.container{

  width250px;

  height200px;

  border2px dashed maroon;

  border-inline-end2px solid green;

}

 

This would produce a result as follows:

Here, the container class has its width set as 250px and height as 200px. The .container has defined all sides of its border, having 2px border width, dashed border style and maroon colour. The border-inline-end is defined as having 2px border width, solid border style and green colour. 

This means that the solid green border will be on the right side in languages written from left to right, like English. Whereas for languages like Arabic, where the language is from right-to-left, the solid green border will be on the left side of the box.

 

Rounded Borders

The border-radius property is used to rounded corners to the box containing your element.

 

HTML:

<div class="container">

    <p>Rounded Borders.</p>

  </div>

 

CSS:

.container{

  Width:200px;
  height:100px;

  border2px solid red;

  border-radius1em;

}

 

  Output:

 

You can also define the border-radius for each side border-top-left-radiusborder-top-right-radiusborder-bottom-right-radius and  border-bottom-left-radius

There is also a provision to apply shorthand to border-radius by specifying them in the following order: top left, top right, bottom and then bottom left.

 

HTML:

<div class="container"></div>

 

CSS:

.container{

  width200px;

  height200px;

  border2px dashed red;

  border-radius1em 2em 3em 4em;

}

 

 

Border Images

The border-image property allows us to set a source image as the border, manage how that image is sliced, the image width, how the image should repeat and how far the border is outset from the edge.

The border-image-width property is like the border-width property-  it defines the width of your body image. The border-image-outset property lets you set the distance between the border-image and the box that it wraps around.

 

CSS:

 

.container{

  width300px;

  height350px;

  border10px solid

  border-image-slice61 58 51 48;

  border-image-width20px 20px 20px 20px;

  border-image-outset0px 0px 0px 0px;

  border-image-repeatstretch stretch;

  border-image-sourceurl("https://images.unsplash.com/photo-1628645200564-e6e536043095?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=435&q=80");

}

 

OUTPUT:

Border Image Source

The border-image-source property is used to set images as borders. It can be a url for any valid image, including CSS gradients.

.container{

  border-image-sourceurl('path/to/image.png');

}

 

.container{

  border-image-sourcelinear-gradient(to bottom#000#fff);

}

 

Border Image Slice

The border-image-slice property allows us to slice an image into nine parts, made up of 4 split lines.  In this, we define the top, right, bottom and left offset values.

 

.container{

  border-imageurl('image.jpg');

  border-image-slice61 58 51 48;

}

 

After the offset values are defined, we have nine sections of the images: 4 corners, four edges and a middle section. In the above image, C stands for corners, and E stands for edges. The border-image-repeat  property defines how those edges fill their space, and the border-image-width property controls the size of the slices

Border Image Repeat

This property determines how the border image would repeat. 

  • The default value is stretch, which causes the source image to stretch and fill the available space.
  • The repeat value causes the source image to repeat as many times as possible, clipping the edge regions to achieve it.
  • The round value is similar to repeat. Rather than clipping the image edge regions to fit as many as possible, this value stretches the image and repeats it. This results in achieving a flawless repeat.
  • The space value is the same as the repeat, but it adds some space between edges to create a pattern.

 

Frequently Asked Questions

 

What are the properties of CSS borders?

The three properties of the border that you can change are border-color,border-style and border-width.

 

How can I add a simple line to my webpage?

To add a horizontal line in the markup you can simply use the <hr> tag.

 

What is the use of the border-image property?

The border-image property allows us to set a source image as the border, manage how that image is sliced, the image width, how the image should repeat and how far the border is outset from the edge.

 

What are the different values that we can give for the border-style property?

The different values that we can give for the border-style property are dotted, dashed, solid, double, groove, ridge and inset.

 

Key Takeaways

Borders in CSS are used to enhance the appearance of your webpage by providing a variety of properties to create borders for boxes appropriately and stylishly. It allows us to give different colours, thicknesses, rounded corners to borders, making it elegant. Images could also be set as borders by giving suitable values to the border-image property.

 

Already excited?. Learn Web development from top courses provided by Coding Ninjas like Full Stack Web Development Course with Node.js + HTML/CSS/JS . These courses will help you learn and master web development so that you can become a ninja in it!.  

 

Live masterclass