Category: CSS

CSS border-image-source Property

Post author By Lena Stanley
Post date September 2, 2021

The CSS border-image-source property defines the path to the image to be used as a border.

Syntax:

border-image-source: none|image;

none – no image will be used.

image – the path to the image to be used as a border.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg-1 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
  border-image-repeat: repeat;
  border-image-slice: 30;
}

</style>
</head>
<body>

<p id="borderimg-1">Hello World!</p>

</body>
</html>

Output:

Hello World!

The original image:

Enjoy coding!

Read also:

CSS Gradient Border

CSS border-radius property

Tags border, border-image, border-image-source, CSS

Web development

CSS border-image-repeat Property

Post author By Lena Stanley
Post date September 2, 2021

The CSS border-image-repeat property defines whether the border-image should be repeated, rounded or stretched.

Demo:

Syntax:

border-image-repeat: stretch|repeat|round|space;

stretch (default) – the image is stretched to fill the area.

repeat – the image is repeated to fill the area.

round – the image is repeated to fill the area (if it does not fill the area with a whole number of tiles, the image is rescaled so it fits).

space – the image is repeated to fill the area (if it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg-1 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
  border-image-repeat: repeat;
  border-image-slice: 30;
}

#borderimg-2 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
  border-image-repeat: round;
  border-image-slice: 30;
}

#borderimg-3 { 
  border: 15px solid transparent;
  padding: 15px;
  border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
  border-image-repeat: stretch;  
  border-image-slice: 30;
}
</style>
</head>
<body>

<h4>border-image-repeat: repeat;</h4>
<p id="borderimg-1">Here, the image tiles to fill the area. Tiles are divided if necessary.</p>

<h4>border-image-repeat: round;</h4>
<p id="borderimg-2">Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.</p>

<h4>border-image-repeat: stretch;</h4>
<p id="borderimg-3">Here, the image is stretched to fill the area.</p>

</body>
</html>

Output:

border-image-repeat: repeat;

Here, the image tiles to fill the area. Tiles are divided if necessary.

border-image-repeat: round;

Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.

border-image-repeat: stretch;

Here, the image is stretched to fill the area.

The original image:

Enjoy coding!

Read also:

CSS Border Property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

Tags border, border-image, border-image-repeat, CSS

Web development

CSS border-image-outset Property

Post author By Lena Stanley
Post date September 2, 2021

The CSS border-image-outset property defines the amount by which the border-image area extends beyond the border-box.

Demo:

Click the “Try it” button to change the border-image-outset property of the div element to 15px:

Hello World!

Syntax:

border-image-outset: length|number;

length – a length unit defining how far from the edges the border image will appear (the default value is 0).

number – represent multiples of the corresponding border-width.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg1, #borderimg2 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image-source: url(https://lenadesign.org/wp-content/uploads/2021/09/border-1.png);
  border-image-width: 15px;
  border-image-repeat: round;
  border-image-slice: 30;
}

#borderimg1 {
  border-image-outset: 5px; 
    }

#borderimg2 {
  border-image-outset: 15px; 
    }

</style>
</head>
<body>

<p id="borderimg1">Some text...some text...some-text...</p>
    <br>
<p id="borderimg2">Some text...some text...some-text...</p>

</body>
</html>

Output:

border-image-outset: 5px;

border-image-outset: 15px;

The original image:

Enjoy coding!

Read also:

CSS Border Property

CSS Multiple Borders

CSS Outline

Tags border, border-image, border-image-outset, CSS

Web development

CSS border-color Property

Post author By Lena Stanley
Post date September 1, 2021

The CSS border-color property settles the color of an element’s four borders.

The CSS border-color property can have from one to four values (top border, right border, bottom border, left border).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.one-value {
  border-style: solid;
  border-color: #2a9d8f;
}

.two-values {
  border-style: solid;
  border-color: #e76f51 #2a9d8f;
}

.three-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f;
}

.four-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f #f4a261;
}
</style>
</head>
<body>

<div class="one-value">One-colored border!</div>
<br>

<div class="two-values">Two-colored border!</div>
<br>

<div class="three-values">Three-colored border!</div>
<br>

<div class="four-values">Four-colored border!</div>

</body>
</html>

Output:

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Syntax:

border-color: color|transparent;

color – defines a border color.

transparent – defines that the border color is transparent.

Example2:

If the CSS border-color property has one value, all four borders will have one color:

<!DOCTYPE html>
<html>
<head>
<style>
.one-value {
  border-style: solid;
  border-color: #2a9d8f;
}

</style>
</head>
<body>

<div class="one-value">One-colored border!</div>

</body>
</html>

Output:

One-colored border!

Example3:

If the CSS border-color property has two values, the top and bottom borders will have different color, then the right and left borders:

<!DOCTYPE html>
<html>
<head>
<style>

.two-values {
  border-style: solid;
  border-color: #e76f51 #2a9d8f;
}

</style>
</head>
<body>

<div class="two-values">Two-colored border!</div>

</body>
</html>

Output:

Two-colored border!

Example4:

If the CSS border-color property has three values:

<!DOCTYPE html>
<html>
<head>
<style>

.three-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f;
}
</style>
</head>
<body>

<div class="three-values">Three-colored border!</div>

</body>
</html>

Output:

Three-colored border!

Example5:

If the CSS border-color property has four values, each border will have a different color:

<!DOCTYPE html>
<html>
<head>
<style>

.four-values {
  border-style: solid;
  border-color: #e76f51 #e9c46a #2a9d8f #f4a261;
}
</style>
</head>
<body>

<div class="four-values">Four-colored border!</div>

</body>
</html>

Output:

Four-colored border!

Enjoy coding!

Read also:

CSS Border Property

CSS border-bottom Property

Tags border, border-color, CSS

Web development

CSS Falling Autumn Leaves

Post author By Lena Stanley
Post date August 31, 2021

To create the CSS Falling Autumn Leaves animation follow the steps below and watch the video tutorial:

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the container and add the text and the leaf emoji (in this tutorial I used emoji from: emojipedia.org):

<div class="content">
<div class="hello">Hello</br>Autumn!</div>
<div class="leaves">
  <div class="leaf1">🍁</div>
  <div class="leaf2">🍁</div>
  <div class="leaf3">🍁</div>
  <div class="leaf4">🍁</div>
  <div class="leaf6">🍁</div>
  <div class="leaf7">🍁</div>
  <div class="leaf8">🍁</div>
  <div class="leaf9">🍁</div>
  <div class="leaf10">🍁</div>
  <div class="leaf11">🍁</div>
</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  background-color: #fcecd7;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
  overflow: hidden;
}

.content {
  position: relative;
}

Style the text:

.hello {
  text-align: center;
  font-size:80px;
  font-weight: bold;
  font-family: tahoma;
  color: #6a040f;
  text-shadow: 1px 1px #370617;
}

Add some leaves:

.leaves {
  position: absolute;
}

.leaf1 {
  position: absolute;
  font-size: 70px;
  top:0;
  animation: fall 5s linear infinite;
}

.leaf2 {
  position: absolute;
  font-size: 55px;
  top:0;
  animation: fall2 6s linear infinite;
}

.leaf3 {
  position: absolute;
  font-size: 40px;
  top:-400px;
  left:-100px;
  animation: fall 4s linear infinite 1s;
}

.leaf4 {
  position: absolute;
  font-size: 45px;
  top:-400px;
  left:300px;
  animation: fall2 4s linear infinite 1.5s;
}

.leaf5 {
  position: absolute;
  font-size: 55px;
  top:-410px;
  left:250px;
  animation: fall3 4s linear infinite 2s;
}
.leaf6 {
  position: absolute;
  font-size: 55px;
  top:-410px;
  left:-250px;
  animation: fall3 4s linear infinite 1.5s;
}

.leaf7 {
  position: absolute;
  font-size: 35px;
  top:-410px;
  left:-350px;
  animation: fall2 5s linear infinite .5s;
}

.leaf8 {
  position: absolute;
  font-size: 75px;
  top:-430px;
  left:550px;
  animation: fall3 5s linear infinite .5s;
}

.leaf9 {
  position: absolute;
  font-size: 35px;
  top:-430px;
  left:150px;
  animation: fall4 6s linear infinite .3s;
}

.leaf10 {
  position: absolute;
  font-size: 55px;
  top:-430px;
  left:450px;
  animation: fall5 3.7s linear infinite 1.3s;
}

.leaf11 {
  position: absolute;
  font-size: 55px;
  top:-430px;
  left:650px;
  animation: fall5 4.7s linear infinite 1.7s;
}

Add CSS @keyframes to animate leaves:

@keyframes fall {
  0% {top:-410px; transform: translateX(-100px) rotateX(180deg);}
  100% {top:400px; transform: translateX(250px) rotateX(-180deg);}
}

@keyframes fall2 {
  0% {top:-410px; transform: translateX(50px) rotateX(-90deg);}
  100% {top:400px; transform: translateX(-350px) rotateX(180deg);}
}

@keyframes fall3 {
  0% {top:-430px; transform: translateX(0px) rotateX(-180deg);}
  100% {top:400px; transform: translateX(-400px) rotateX(180deg);}
}

@keyframes fall4 {
  0% {top:-430px; transform: translateX(0px) rotateY(-180deg);}
  100% {top:400px; transform: translateX(-400px) rotateY(180deg);}
}

@keyframes fall5 {
  0% {top:-410px; transform: translateX(-100px) rotateY(180deg);}
  100% {top:400px; transform: translateX(250px) rotateY(-180deg);}
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Snowfall

CSS Paper Plane Animation

CSS Cyclist /Bike Animation

Tags #CSSAnimation, Autumn, CSS, fall, Leaves Animation

Web development

CSS border-bottom Property

Post author By Lena Stanley
Post date August 31, 2021

The CSS border-bottom property is a shorthand property for:

border-bottom-width

border-bottom-style

border-bottom-color

Note: If you do not specify the border-bottom-color, the color applied will be the color of the text.

Syntax:

border-bottom: border-width border-style border-color;

border-bottom-width – defines the width of the bottom border.

border-bottom-style – defines the style of the bottom border.

border-bottom-color – defines the color of the bottom border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-bottom: 5px dotted red;
}

p {
  border-bottom: 4px dashed blue;
}

div {
  border-bottom: solid;
}
</style>
</head>
<body>

<h4>A heading with a dotted red bottom border.</h4>   
<p>A paragraph with a dashed blue bottom border.</p>
<div>A div element with a solid bottom border.</div>

</body>
</html>

Output:

A heading with a dotted red bottom border.

A paragraph with a dashed blue bottom border.

A div element with a solid bottom border.

Enjoy coding!

Read also:

CSS Border Property

CSS Multiple Borders

Tags border, border-bottom, CSS

Web development

CSS border-bottom-width Property

Post author By Lena Stanley
Post date August 31, 2021

The CSS border-bottom-width property settles the width of an element’s bottom border.

Demo:

Syntax:

border-bottom-width: medium|thin|thick|length;

medium (default) – defines a medium bottom border.

thin – defines a thin bottom border.

thick – defines a thick bottom border.

length – allows you to specify the thickness of the bottom border (CSS Units).

Example1:

Set the width of the bottom border to medium:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom-style: solid;
  border-bottom-width: medium;
}

div {
  border-style: solid;
  border-bottom-width: medium;
}
</style>
</head>
<body>

<p>A paragraph with a medium bottom border.</p>

<div>A div element with a medium bottom border.</div>

</body>
</html>

Output:

A paragraph with a medium bottom border.

A div element with a medium bottom border.

Example2:

Set the width of the bottom border to 5px:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom-style: solid;
  border-bottom-width: 5px;
}

div {
  border-style: solid;
  border-bottom-width: 5px;
}
</style>
</head>
<body>

<p>A paragraph with a 5px thick bottom border.</p>

<div>A div element with a 5px thick bottom border.</div>

</body>
</html>

Output:

A paragraph with a 5px thick bottom border.

A div element with a 5px thick bottom border.

Enjoy coding!

Read also:

CSS border-radius property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

Tags border, border-bottom, border-bottom-width, CSS

Web development

CSS border-bottom-style Property

Post author By Lena Stanley
Post date August 31, 2021

Demo:

The CSS border-bottom-style property settles the style of an element’s bottom border.

Syntax:

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example1:

A dotted bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: dotted;
}

p {
  border-style: solid;
  border-bottom-style: dotted;
}
</style>
</head>
<body>

<div>A div element with a dotted bottom border</div>

<p>A paragraph with a dotted bottom border.</p>

</body>
</html>

Output:

A div element with a dottoed bottom border

A paragraph with a dotted bottom border.

Example2:

A double bottom border:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-bottom-style: double;
}

p {
  border-style: solid;
  border-bottom-style: double;
}
</style>
</head>
<body>

<div>A div element with a double bottom border</div>

<p>A paragraph with a double bottom border.</p>

</body>
</html>

Output:

A div element with a double bottom border

A paragraph with a double bottom border.

Enjoy coding!

Read also:

CSS border Property

CSS Outline

CSS Border Corner Shape: Scoop, Notch, Square-Cut

Tags border, border-bottom, border-bottom-style, CSS, HTML

Web development

CSS border-bottom-right-radius Property

Post author By Lena Stanley
Post date August 24, 2021

The CSS border-bottom-right-radius property specifies the radius of the bottom right corner.

Demo:

Click the button to change the border-bottom-right-radius property (50px) of the DIV element:

Hello

Syntax:

border-bottom-right-radius: length;

length – specifies the shape of the bottom-left corner (px/%).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-right-radius: 25px;
}

#example2 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-right-radius: 50px 20px;
}
    
#example3 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-right-radius: 50%;
}
</style>
</head>
<body>

<h4>border-bottom-right-radius: 25px;</h4>
<div id="example1">
  <p>The border-bottom-right-radius property defines the radius of the bottom-right corner.</p>
</div>

<h4>border-bottom-right-radius: 50px 20px;</h4>
<div id="example2">
  <p>If two values are set; the first one is for the bottom border, the second one for the right border.</p>
</div>
    
<h4>border-bottom-right-radius: 50%;</h4>
<div id="example3">
  <p>The CSS border-bottom-right-radius property is set to 50%.</p>
</div>

</body>
</html>

Output:

border-bottom-right-radius: 25px;

The border-bottom-right-radius property defines the radius of the bottom-right corner.

border-bottom-right-radius: 50px 20px;

If two values are set; the first one is for the bottom border, the second one for the right border.

border-bottom-right-radius: 50%;

The CSS border-bottom-right-radius property is set to 50%.

Enjoy coding!

CSS border-radius property

Tags border, border-bottom, border-bottom-right-radius, CSS

Web development

CSS border-bottom-left-radius Property

Post author By Lena Stanley
Post date August 24, 2021

The CSS border-bottom-left-radius property specifies the radius of the bottom-left corner.

Demo:

Click the button to change the border-bottom-left-radius property (50px) of the DIV element:

Hello

Syntax:

border-bottom-left-radius: length;

length – specifies the shape of the bottom-left corner (px/%).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 25px;
}

#example2 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 50px 20px;
}
    
#example3 {
  border: 3px solid #2a9d8f;
  padding: 10px;
  border-bottom-left-radius: 50%;
}
</style>
</head>
<body>

<h4>border-bottom-left-radius: 25px;</h4>
<div id="example1">
  <p>The border-bottom-left-radius property defines the radius of the bottom-left corner.</p>
</div>

<h4>border-bottom-left-radius: 50px 20px;</h4>
<div id="example2">
  <p>If two values are set; the first one is for the bottom border, the second one for the left border.</p>
</div>
    
<h4>border-bottom-left-radius: 50%;</h4>
<div id="example3">
  <p>The CSS border-bottom-left-radius property is set to 50%.</p>
</div>

</body>
</html>

Output:

border-bottom-left-radius: 25px;

The border-bottom-left-radius property defines the radius of the bottom-left corner.

border-bottom-left-radius: 50px 20px;

If two values are set; the first one is for the bottom border, the second one for the left border.

border-bottom-left-radius: 50%;

The CSS border-bottom-left-radius property is set to 50%.

Enjoy coding!

Read also:

CSS border-radius property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape

Tags border, border-bottom, border-bottom-left-radius, CSS