Tag: border-top

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