CSS margin border top color propertys
CSS border-top-color property
The border-top-color property defines the color of the top border of an element.
You can specify the top border color, as well as bottom, right, and left border colors with the border-color shorthand property.
If you use the border-top-color property, you should first set the border-style or border-top style properties and then change the color of the defined style.
The default width of a border is medium. You can specify the width using either the border-width or border-top-width properties.
Example
Set a color for the top boder:
div {border-top-color:coral;}
Definition and Usage
The border-top-color property sets the color of an element’s top border.
Note: Always declare the border-style or the border-top-style property before the border-top-color property. An element must have a border before you can change the color.
More Examples
Example
Set a color for the top border with a HEX value:
div {border-top-color: #92a8d1;}
Example
Set a color for the top border with an RGB value:
div {border-top-color: rgb(201, 76, 76);}
Example
Set a color for the top border with an RGBA value:
div {border-top--color: rgba(201, 76, 76, 0.3);}
Example
Set a color for the top border with a HSL value:
div {border-top-color: hsl(89, 43% 51%);}
Example
Set a color for the top border with a HSLA value:
div {border-top-color: hsla(89, 43%, 51%, 0.3);}
Example
Set a transparent top border:
div {border-top-color: transparent;}
CSS margin-top Property
Definition
The CSS margin-top-property allows us to specify the margin space above the padding and border for an element.
Applies To
All elements except elements with table display types other than inline-table, table and table-caption.
Property Values
CSS allows specification of a margin width.
negative values are acceptable for when you want to overlap elements.
auto – The browser sets the top margin and this can vary from browser to browser.
Inherit – The margin-top properties are inherited from the parent element.
Length – Defines a top margin space in a unit measurement such as em or pixel.
n% – A percentage value relative to the parent element where n is a number.
Default Value
Default value of margin-top is set to 0.
Inheritance
The margin-top property is Not inherited from the parent element unless specified using the inherit property value.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
As mentioned a bove setting the property value to auto is browser dependant.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS margin-top property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS margin-top Property</title>
<!-- Valid values for CSS margin-top property are:
auto, inherit, length and percentage.
-->
<style type="text/css">
/* This top margin set to 50px */
#img1 {
margin-top: 50px;
}
/* This top margin set to 150px */
#img2 {
margin-top: 150px;
}
/*This top margin set to -75px */
#img3 {
margin-top: -75px;
}
</style>
</head>
<body>
<h1>Looking at the CSS margin-top Property</h1>
<p>The next image has a top margin of 50 pixels.
<img id="img1" src="https://server2client.com/images/chikenpiesmall.jpg"
alt="Chiken Pie">
</p>
<p>The next image has a negative margin of 75 pixels.
<img id="img3" src="https://server2client.com/images/chikenpiesmall/jpg"
alt="Chiken Pie">
</p>
</body>
</html>
