Categories
CSS Web development

How to add stroke/ outline to the text in CSS?

How to add stroke/ outline to the text in CSS?

Demo:

*to see the text on the website click here.

Step1.

Add HTML

Create a div element and add some text:

<div class="text">Outline</div>

Step2.

Add CSS

Set the position of the text and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Style the text:

.text {
  font-size: 100px;
  font-family: tahoma;
  font-weight: 900;
  -webkit-text-fill-color: #2a9d8f; 
  -webkit-text-stroke: 5px #264653;
  text-shadow: 5px 5px 10px #333;
}

Enjoy coding!

Read also:

CSS Slide Text Animation/ Slide Effect

Pure CSS Rainbow Text Animation

Categories
CSS Web development

How to create a transparent text with stroke in CSS?

How to create a transparent text with stroke in CSS?

Demo:

*to see the transparent text with stoke on the website click here.

To create a transparent text with stoke in CSS follow the steps below:

Step1.

Add HTML

Create a div element and add the text:

<div class="seaside">SEASIDE</div>

Step2.

Add CSS

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

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Add background image and style the text:

.seaside {
  position: relative;
  background-image: url('https://lenadesign.org/wp-content/uploads/2021/07/brighton-1.jpg');
  width: 640px;
  height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  font-weight: 900;
  font-family: tahoma;
  -webkit-text-stroke: 5px white;
  -webkit-text-fill-color: transparent;  
}

Enjoy coding!

Read also:

CSS Blurred Background Image

CSS Cutout Text

Categories
CSS Web development

CSS border-width Property

CSS border-width Property

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

Demo:

The CSS border-width property can have from one to four values.

Example1:

Set the width of the top and bottom borders to 8px, and the width of the left and right borders to 3px:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-style: solid;
  border-width: 8px 3px;
}

</style>
</head>
<body>

<h4>A heading with a 8px top and bottom border and 3px left and right border.</h4>

</body>
</html>

Output:

A heading with a 8px top and bottom border and 3px left and right border.

Syntax:

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

medium (default) – defines a medium border.

thin – defines a thin border.

thick – defines a thick border.

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

Example2:

Set the width of the borders to thick:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-style: solid;
  border-width: thick;
}

p {
  border-style: solid;
  border-width: thick;
}
</style>
</head>
<body>

<h4>A heading with a thick border.</h4>
<p>A paragraph with a thick border.</p>

</body>
</html>

Output:

A heading with a thick border.

A paragraph with a thick border.


Enjoy coding!

Read also:

CSS border Property

CSS border-top-width Property

Categories
CSS Web development

CSS border-top Property

CSS border-top Property

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

border-top-width

border-top-style

border-top-color

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

Syntax:

border-top: border-width border-style border-color;

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

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

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

Example:

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

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

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

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

</body>
</html>

Output:

A heading with a dotted red top border.

A paragraph with a dashed blue top border.

A div element with a solid top border.

Enjoy coding!

Read also:

CSS border Property

CSS border-bottom Property

Categories
CSS Web development

CSS border-top-width Property

CSS border-top-width Property

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

Demo:

Syntax:

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

medium (default) – defines a medium top border.

thin – defines a thin top border.

thick – defines a thick top border.

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

Example1:

Set the width of the top border to the medium:

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

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

<p>A paragraph with a medium top border.</p>
<div>A div element with a medium top border.</div>

</body>
</html>

Output:

A paragraph with a medium top border.

A div element with a medium top border.

Example2:

Set the width of the top border to 5px:

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

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

<p>A paragraph with a 5px thick top border.</p>
<div>A div element with a 5px thick top border.</div>

</body>
</html>

Output:

A paragraph with a 5px thick top border.

A div element with a 5px thick top border.

Enjoy coding!

Read also:

CSS border-bottom-width Property

CSS border-radius property

Categories
CSS Web development

CSS border-top-style Property

CSS border-top-style Property

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

Demo:

Syntax:

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

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 top border:

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

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

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

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

</body>
</html>

Output:

A div element with a dotted top border

A paragraph with a dotted top border.


Example2:

A double top border:

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

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

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

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

</body>
</html>

Output:

A div element with a double top border

A paragraph with a double top border.


Enjoy coding!

Read also:

CSS border-bottom-style Property

CSS Outline

Categories
CSS Web development

CSS border-top-right-radius Property

CSS border-top-right-radius Property

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

CSS border-top-right-radius Property

Demo:

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



Hello


Syntax:

border-top-left-radius: length;

length – specifies the shape of the top-right corner (px/%).

Example:

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

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

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

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

</body>
</html>

Output:

border-top-right-radius: 25px;

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

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

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

border-top-right-radius: 30%;

The CSS border-top-right-radius property is set to 30%.


Enjoy coding!

Read also:

CSS border-top-left-radius Property

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

Categories
CSS

CSS border-top-left-radius Property

CSS border-top-left-radius Property

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

CSS border-top-left-radius Property

Demo:

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



Hello


Syntax:

border-top-left-radius: length;

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

Example:

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

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

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

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

</body>
</html>

Output:

border-top-left-radius: 25px;

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

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

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

border-top-left-radius: 30%;

The CSS border-top-left-radius property is set to 30%.


Enjoy coding!

Read also:

CSS border-bottom-left-radius Property

CSS border-radius property

Categories
CSS Web development

CSS border-top-color Property

CSS border-top-color Property

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

Syntax:

border-top-color: color|transparent;

color – defines the color of the top border.

transparent – defines that the border color should be transparent.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-top-style: solid;
  border-top-color: #2a9d8f;
}

p {
  border-style: solid;
  border-top-color: #e76f51;
}
</style>
</head>
<body>

<h4>A heading with a colored top border.</h4>
<p>A paragraph with a colored top border.</p>

</body>
</html>

Output:

A heading with a colored top border.

A paragraph with a colored top border.


Enjoy coding!

Read also:

CSS border-bottom-color Property

CSS Gradient Border

Categories
CSS Web development

CSS border-style Property

CSS border-style Property

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

Demo:

The CSS border-style property can have from one to four values.

Each side of the border (top, right, bottom, left) can have a different style.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.one {
border-style: dotted solid dashed double;
}

</style>
</head>
<body>

<h4 class="one">This is a heading.</h4>

</body>
</html>

Output:

This is a heading.

Syntax:

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

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.

Example2:

Set different borders on each side of an element:

<!DOCTYPE html>
<html>
<head>
<style>
.a {border-style: solid dotted dashed double;}
.b {border-style: solid dotted dashed;}
.c {border-style: solid dotted;}
.d {border-style: solid;}
</style>
</head>
<body>

<h4 class="a">This is a heading.</h4>
<h4 class="b">This is a heading.</h4>
<h4 class="c">This is a heading.</h4>
<h4 class="d">This is a heading.</h4>

</body>
</html>

Output:

This is a heading.

This is a heading.

This is a heading.

This is a heading.

Enjoy coding!

Read also:

CSS border Property

CSS border-color Property