Tag: border

Categories
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
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 colour 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
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
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
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

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
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
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

Categories
Web development

CSS border-right Property

CSS border-right Property

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

border-right-width

border-right-style

border-right-color

Syntax:

border-right: border-width border-style border-color;

border-right-width – settles the width of an element’s right border.

border-right-style – property settles the style of an element’s right border.

border-right-color – settles the color of an element’s right border.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  border-right: 5px dotted #2a9d8f;
}

p {
  border-right: 4px solid #e76f51;
}

div {
  border-right: double;
}
</style>
</head>
<body>

<h4>A heading with a dotted #2a9d8f right border.</h4>

<p>A paragraph with a solid #e76f51 right border.</p>

<div>A div element with a double right border.</div>

</body>
</html>

Output:

A heading with a dotted #2a9d8f right border.

A paragraph with a solid #e76f51 right border.

A div element with a double right border.

Enjoy coding!

Read also:

CSS border Property

CSS border-bottom Property

Categories
Web development

CSS border-right-width Property

CSS border-right-width Property

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

Demo:

Syntax:

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

medium (default) – defines a medium right border.

thin – defines a thin right border.

thick – defines a thick right border.

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

Example1:

Set the width of the right border to thin:

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

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

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

</body>
</html>

Output:

A heading with a thin right border.

A paragraph with a thin right border.


Example2:

Set the width of the left border to 10px:

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

p {
  border-style: solid;
  border-right-width: 10px;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

A heading with a 10px thick right border.

A paragraph with a 10px thick right border.


Enjoy coding!

Read also:

CSS border-bottom-width Property

CSS border-left-width Property