Gradient Borders And Border Images In CSS

Websites are the face of the Internet. If you want to take advantage of any digital revenue, your website has to be up to date and have the extra shine it needs to attract visitors coming and again. 

The fundamental of website styling as any web developer would know starts with CSS. CSS libraries get updated quite often and with each new update, you get to use something more exciting to add better styling to your web pages. 

In this article, you can learn about the CSS border properties that help you add images and gradients to borders. 

CSS Border Properties

Cascading styles sheets or shortly called the CSS are scripts or snippets of codes used to modify the styling of an HTML element in a webpage. 

To understand the border properties, you should understand the way CSS properties are applied to the HTML elements. When you apply CSS properties to an element, it considers the element to be enclosed within a box. 

Any text, anchor, image, paragraph, or div can all be visualized as an element wrapped up by the CSS box. In this box model, every box element has attributes like margin, border, padding, and content. By modifying these attributes, you can visually change how the element looks on the webpage.

Here is a short explanation of each of the box parts for better understanding. 

  • Content – the space where the actual text and image content appear
  • Padding – the space between the content and the border. This area is transparent
  • Border – the outline of the box that wraps around the padding and the content. 
  • Margin – another transparent part that defines the space between the box and other elements. 

By increasing the border, padding, and margin width and height, you can control how the element fits into the page. 

As for borders, you can set additional properties like color, gradient, or set an image that will let the element stand out from the rest of the elements. 

Here is a brilliant example of a website that makes use of CSS border image properties.

Types Of Borders

The different types of custom borders you can have are:

Regular Border

A regular border is one that is the default available border for an element. It has certain properties that can be modified to give the look you want to the element. The major properties that allow you to modify the border of an element are:

  • border-color 

This property allows you to change the color of the border surrounding an element.  The value for this property can be mentioned as an RGB value, name of the color, or the hex code for a color. You can also specifically change each side of the border using properties like border-bottom-color, border-top-color, border-left-color, and border-right-color. 

  • border-style

A border can be made to appear as a thin line, dotted lines, as a groove, and more. The possible styling options available are:

  • none
  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
  • hidden

Just similar to the color property you can apply the styling options to each side of the border specifically. 

  • Border-width

Border- width is used to specify the thickness of the border in terms of pixels.

Here are some examples of regular border styling with CSS.

Inline styling

<p style = “border:4px dotted red;”>

Sample text

</p>

In script:

p {

   border: 3px groove blue;

}

p {

border-width:4px; 

         border-top-style:solid;

         border-bottom-style:dashed;

         border-left-style:groove;

         border-right-style:double;

}

Border Images

Instead of using regular borders, you can try to add an image to the border and make it appear more attractive. You can choose to use the complete image, use a slice of it, or repeatedly use a part of the image. 

The CSS border-image property lets you slice the image into 9 sections and use them across the border as per the property specifications.

The two main properties that you can use to achieve this are:

  • border-image-source

Used to specify the image path/URL

  • border-image-slice

Used to slice the image to be used on the border. 

  • border-image-repeat

Used to either stretch, repeat, or round the image slice shown as the border.

  • border-image-outset

Used to specify the area that the image will extend to beyond the border-box. 

This CSS property is not supported in older versions of browsers. So, make sure to update your browser to the latest to test the code and do have alternative styling in place in case your web pages are viewed by older browser versions.  

Example:

className {

border: 20px solid;

border-image-source: url(/url/to/some/fancy/image.jpg);

border-image-slice: 60 30;

border-image-repeat: round;

border-image-width: 20px;

}

Gradient Borders

Gradient borders are not directly supported in CSS. Border images with the gradient or a gradient background on top of which the content is overlaid can be used to achieve the gradient effect.  Both methods are explained below. 

To create gradients, set a border size, and set color as transparent. Instead of an image or URL path, specify gradient in the border-image property and set border-image-slice to 1. 

Example:

.className

{

border: 10px solid;

border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66));

border-image-slice: 1;

}

The parameters of the linear gradient function are the angle of gradient followed by the colors to be used in the gradient. The angle can be expressed in terms of degrees or by directions such as ‘ to right, to bottom right, to left, and so on. If not mentioned, the default direction of the gradient is from the top to bottom. The colors can be mentioned as color name strings, RGB values, or hex values. 

You can also use radial-gradient or the conic gradient function in place of the linear gradient for the corresponding effect. 

Example:

.className {

border: 10px solid;

border-image: radial-gradient (red blue)) 1;

}

.className {

border: 10px solid;

border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;

}

In the above example, a shorthand CSS is used, with the properties border-image-source and border-image-slice shortened and mentioned in order as attributes of border-image. 

The second way to go about adding a border gradient is more of a workaround where you specify a background gradient and then set the padding equal to the border width. This can be used as an alternative method for use in older browsers

Example:

.border {

width: 400px;

position: relative;

background: linear-gradient(to right, green, lightgreen);

padding: 3px;

}

.inner {

background: white;

padding: 25px;

}

/*The ‘border’ class is to be used for enclosing div and the ‘inner’ class is to be used for the content. */

<div class=”border”>

        <div class=”inner”>

    !———–Content goes here————–!

        </div>

    </div>

The Wrap Up

So, this is all about the gradient borders and border images in CSS. We hope this article would have helped you in making your website design more stylish, and aesthetic. 

Stuck anywhere? Do let us know in the comments below.