EDUCBA

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Border Generator

CSS-Border-Generator

Introduction to CSS Border Generator

If you consider a box, the border is always lying in between margin and padding. The border is always on top of the HTML element just like we have seen on top of the button. The border makes other element moves away if you use incorrect values, so you must use property otherwise the user interface disturbed. In this topic, we are going to learn about CSS Border Generator.

Illustration with Example:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

BorderGen.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderStyles.css">
</head>
<body>
<div class="square">Hello How are you?</div>
</body>
</html>

BorderStyles.css:

div {
width: 200px;
height: 200px;
padding: 60px;
border: 60px solid transparent;
background-image: linear-gradient(0deg, brown, brown),
linear-gradient(0deg, pink, pink),
linear-gradient(0deg, red, red);
background-clip: content-box, padding-box, border-box;
/* background clip includes multiples areas like content,padding,border */
}

Output:

CSS Border Generator output 1

Brief Explanation:

  • Brown color space is content as shown in the above image.
  • Above image no padding so content “Hello How are you” touched the top portion of brown color.
  • The pink color is border as we can see in the above picture with a certain width.
  • At last Red color is margin as like above image with certain values.

How does Border Generator Works?

It works on the border-style, border-color, and border width. Border width can be applied top, right, bottom or left with any combination. Top, right, bottom, left, top-right, top-bottom, top-left-right, top-bottom-left, top-right-bottom-left etc. combinations.

Syntax:

Selector{
property:value;
}

Example:

h1{
border-width:15px 20px 25px 30px; /* border width 15px(top) 20px(right) 25px(bottom) 30px(left) */
}

Examples of CSS Border Generator

Here are the following examples mention below

Example #1

Solid-Double-Ridge and Groove Style Border:

Syntax:

h1{
border-style: double;
}

Example:

BorderStyles.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BStyles.css">
<title>BorderStyles</title>
</head>
<body>
<h1 class="a">Border Styles1</h1>
<h1 class="b">Border Styles2</h1>
<h1 class="c">Border Styles3</h1>
<h1 class="d">Border Styles4</h1>
</body>
</html>

CSS Code:

BStyles.css

.a{
border-style: solid;
width: 1000px;
border-width: 10px;
color: green;
border-color: brown;
}
.b{
border-style: double;
width: 1000px;
border-width: 10px;
color: pink;
border-color: blue;
}
.c{
border-style: ridge;/* no curved edge border*/
width: 1000px;
border-width: 10px;
color: gray;
border-color: orange;
}
.d{
border-style: groove;/*curved edge border */
width: 1000px;
border-width:10px;
color: lime;
border-color: silver;
}

Output:

CSS Border Generator output 2

Example #2 : Gradient Border

Allows multiple colors at a time in the border is knows as Gradient Border.

Syntax:

h1{
background: linear-gradient(-45deg,blue,yellow,red,……);
}

Example:

BorderGradient.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Width-Style-Color</title>
<link rel="stylesheet" href="BorderGradient.css">
</head>
<body>
<div class="gen">
I am writing border generator article to EDUCBA
</div>
</body>
</html>

CSS Code:

.gen{
width: 400px;
padding: 20px;
border-top: 10px solid yellow;
border-bottom:10px solid red;
background-image:
linear-gradient(brown, brown),
linear-gradient(brown, brown);
background-size:10px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}

Output:

CSS Border Generator output 3

Example #3 : Border Image

There are 6 types of border images

  • Border-image-source
  • Border-image-slice
  • Border-image-width
  • Border-image-outset
  • Border-image-repeat
  • Border-image

1. Border-image-source: We should provide the required image through url, that image displayed on the border.

Syntax:

h1{
border-image-source:url("images.jpg");
}

Looks Like:

CSS Border Generator looks like 1

2. Border-image-slice: Actually, cut the images into pieces and insert in the border.

Syntax:

h1{
border-image-slice:50;
}

Looks Like:

CSS Border Generator looks like 2

3. Border-image-width: Image displayed on the border with the specified width value.

Syntax:

h1{
border-image-width:30px;
}

Looks Like:

looks like 3

4. Border-image-outset: Border of the image will be set up beyond the specified width (as the name indicates outset).

Syntax:

h1{
border-image-outset:50px;
}

Looks Like:

looks like 4

5. Border-image-repeat: It has 4 types

a) Repeat: Image repeats on the border

Syntax:

h1{
border-image-repeat:30px;
}

Looks Like:

looks like 5

b) Stretch: Stretched image formed on the border

Syntax:

h1{
border-image-stretch:30px;
}

Looks Like:

looks like 6

c) Round: Image continued around the border without any disturbance at corners

Syntax:

h1{
border-image-round:30px;
}

Looks Like:

looks like 7

d) Space: Image formed with spaces on borders

Syntax:

h1{
border-image-space:30px;
}

Looks Like:

looks like 8

Example for Above All Border Images:

ImageBorder.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ImageBorder.css">
<title>Image Border</title>
</head>
<body>
<p class="img1">This is the first Image</p>
<p class="img2">This is the second Image</p>
<p class="img3">This is the third Image</p>
</body>
</html>

CSS Code:

ImageBorder.css

p{
heigth:100px;
width:250px;
float:left;
margin:80px;
padding: 20px;
border:20px solid transparent;
background:aqua;
color: black;
}
.img1{
border-image-source:url("images.jpg");
border-image-slice:50;
border-image-repeat:repeat;/* image repeating on border*/
border-image-width:30px;/*border width image set as per value given and covered by image  */
border-image-outset:50px;/*border image covered beyond the specified width( as name indicates outset )  */
}
.img2{
border-image-source:url("images (1).jpg");
border-image-slice:50;
border-image-repeat:strench;/*it streches the image on border*/
border-image-width:30px;
border-image-outset:50px;
}
.img3{
border-image-source:url("images (1).jpg");
border-image-slice:50;
border-image-repeat:space;/*Given spaced image on border*/
border-image-width:30px;
border-image-outset:50px;
}

Output:

output 3

Example #4: Border Radius

Border comes with some radius.

Syntax:

h1{
border-radius: 15px 150px 20px 150px;
}

Example:

BorderRadius.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="BorderRadius.css">
<title>Border Radius</title>
</head>
<body>
<div class="educba">
<div class="a"></div>
<div class="b"></div>
</div>
</body>
</html>

CSS Code:

BorderRadius.css

body{
margin: 0px;
padding: 0px;
}
.educba{
max-width:1160;
margin:50px auto;
}
.a{
width: :200px;
height: 300px;
background: red;
margin:80px auto;
transition:1s; /*wait the cursor over 1 sec of time*/
border-radius: 20px;/* border with 20px radius*/
}
.a:HOVER {
border-radius: 50px;/*hover the cursor on the 1st red space border becomes circle*/
}
.b{
width: :200px;
height: 300px;
background: red;
margin:80px auto;
transition:1s;
border-radius: 15px 150px 20px 150px;
}
.b:HOVER {
border-radius: 150px 20px 150px 20px;/*hover the cursor on the 2nd red space you can see inverted image*/
}

Output:

output 4

Conclusion

Border can be used with any html element by gentle care as we know improper usage disturbs the entire alignment of the application.

Recommended Articles

This is a guide to CSS Border Generator. Here we discuss How does Border Generator Works along with the examples and outputs. You may also have a look at the following articles to learn more –

  1. Visibility in CSS
  2. Menu Icon CSS
  3. CSS Inner Border
  4. CSS Color Generator
0 Shares
Share
Tweet
Share
quiz