CSS Border and Padding Properties Guide

CSS Border Properties A double border.
The CSS border properties allow you to specify the style, A groove border. The effect depends on the
width, and color of an element's border. border-color value.
Border Style
A ridge border. The effect depends on the
border-color value.
The border-style property specifies what kind of border
to display.
An inset border. The effect depends on the
The following values are allowed: border-color value.
 dotted - Defines a dotted border

 dashed - Defines a dashed border An outset border. The effect depends on the
border-color value.
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The No border.
effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect A hidden border.
depends on the border-color value
 inset - Defines a 3D inset border. The effect A mixed border.
depends on the border-color value
 outset - Defines a 3D outset border. The effect
depends on the border-color value Border Width
 none - Defines no border
 hidden - Defines a hidden border The border-width property specifies the width of the
four borders.
Syntax Example:
The width can be set as a specific size (in px, pt, cm, em,
 p.dotted {border-style: dotted;} etc) or by using one of the three pre-defined values:
 p.dashed {border-style: dashed;} thin, medium, or thick.
 p.solid {border-style: solid;}
 p.double {border-style: double;} The border-width property can have from one to four
 p.groove {border-style: groove;} values (for the top border, right border, bottom border,
 p.ridge {border-style: ridge;} and the left border).
 p.inset {border-style: inset;}
 p.outset {border-style: outset;} Example:
 p.none {border-style: none;}
 p.hidden {border-style: hidden;} <!DOCTYPE html>
 p.mix {border-style: dotted dashed solid <html>
double;} <head>
<style>
Sample Output: p.one {
border-style: solid;
border-width: 5px;
}
A dotted border.
p.two {
A dashed border. border-style: solid;
border-width: medium;
A solid border. }
p.three {
border-style: dotted; The border-color property can have from one to four
border-width: 2px; values (for the top border, right border, bottom border,
} and the left border).
p.four { Example:
border-style: dotted;
border-width: thick; <!DOCTYPE html>
} <html>
<head>
p.five { <style>
border-style: double; p.one {
border-width: 15px; border-style: solid;
} border-color: red;
}
p.six {
border-style: double; p.two {
border-width: thick; border-style: solid;
} border-color: green;
}
p.seven {
border-style: solid; p.three {
border-width: 2px 10px 4px 20px; border-style: solid;
} border-color: red green blue yellow;
</style> }
</head> </style>
<body> </head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four <h2>The border-color Property</h2>
borders:</p> <p>This property specifies the color of the four
<p class="one">Some text.</p> borders:</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p> <p class="one">A solid red border</p>
<p class="four">Some text.</p> <p class="two">A solid green border</p>
<p class="five">Some text.</p> <p class="three">A solid multicolor border</p>
<p class="six">Some text.</p> <p><b>Note:</b> The "border-color" property does not
<p class="seven">Some text.</p> work if it is used alone. Use the "border-style" property
<p><b>Note:</b> The "border-width" property does to set the borders first.</p>
not work if it is used alone.
Always specify the "border-style" property to set the </body>
borders first.</p> </html>
</body>
</html> Border - Shorthand Property
The border property is a shorthand property for the
Border Color following individual border properties:
The border-color property is used to set the color of the
four borders. The color can be set by:  border-width
 border-style (required)
 name - specify a color name, like "red"  border-color
 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent
Example: <style>
p.one {
<!DOCTYPE html> border: 1px solid red;
<html> background-color: yellow;
<head> padding-top: 50px;
<style> padding-right: 30px;
div { padding-bottom: 50px;
border: 5px solid red; padding-left: 80px;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>The border Property</h2> <h2>Using Individual padding Properties:</h2>

<p>This property is a shorthand property for border-
width, border-style, and border-color:</p> <p>This is a paragraph with no specified padding.</p>
<div>This is some text.</div> <p class="one">This paragraph has a top and bottom
padding of 50px, a left padding of 80px, and a right
</body> padding of 30px.</p>
</html>
</body>
CSS Padding Properties </html>
The CSS padding properties are used to generate space Padding - Shorthand Property
around content. The padding properties set the size of
the white space between the element content and the To shorten the code, it is possible to specify all the
element border. The padding clears an area around the padding properties in one property.
content (inside the border) of an element. The padding property is a shorthand property for the
following individual padding properties that should be
Padding - Individual Sides in order:
CSS has properties for specifying the padding for each  padding-top
side of an element:  padding-right
 padding-bottom
 padding-top  padding-left
 padding-right
 padding-bottom Example:
 padding-left
<!DOCTYPE html>
All the padding properties can have the following <html>
values: <head>
<style>
 length - specifies a padding in px, pt, cm, etc. p.one {
 % - specifies a padding in % of the width of the border: 1px solid red;
containing element background-color: yellow;
 inherit - specifies that the padding should be padding: 50px 30px 50px 80px;
inherited from the parent element }
</style>
Example: </head>
<body>
<!DOCTYPE html>
<html> <h2>Using The padding Shorthand Property:</h2>
<head>
<p>This is a paragraph with no specified padding.</p> </body>
<p class="one">This paragraph has a top and bottom </html>
padding of 50px, a left padding of 80px, and a right
padding of 30px.</p> Example for a Bottom Tooltip:
</body> <!DOCTYPE html>

</html> <html>
<style>
Tooltips .tooltip {
These are text that appears when the user moves position: relative;
the mouse over an element. display: inline-block;
border-bottom: 1px dotted black;
Example for a Top Tooltip: }
<!DOCTYPE html> .tooltip .tooltiptext {

<html> visibility: hidden;
<style> width: 120px;
.tooltip { background-color: black;
position: relative; color: #fff;
display: inline-block; text-align: center;
border-bottom: 1px dotted black; border-radius: 6px;
} padding: 5px 0;
.tooltip .tooltiptext { /* Position the tooltip */

visibility: hidden; position: absolute;
width: 120px; z-index: 1;
background-color: black; top: 100%;
color: #fff; left: 50%;
text-align: center; margin-left: -60px;
border-radius: 6px; }
padding: 5px 0;
.tooltip:hover .tooltiptext {
/* Position the tooltip */ visibility: visible;
position: absolute; }
z-index: 1; </style>
bottom: 100%; <body style="text-align:center;">
left: 50%;
margin-left: -60px; <h2>Bottom Tooltip</h2>
} <p>Move the mouse over the text below:</p>
.tooltip:hover .tooltiptext { <div class="tooltip">Hover over me

visibility: visible; <span class="tooltiptext">Bottom Tooltip
} example</span>
</style> </div>
<body style="text-align:center;">
</body>
<h2>Top Tooltip</h2> </html>
<p>Move the mouse over the text below:</p>
Example of a Tooltip with Animation:
<div class="tooltip">Hover over me
<span class="tooltiptext">Top Tooltip example</span> <!DOCTYPE html>
</div> <html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to

100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>

<p>When you move the mouse over the text below, the
tooltip text
will fade in and take 1 second to go from completely

invisible to
visible.</p>
<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
CSS Links Links with Backgrounds:
The four links states are: <!DOCTYPE html>

<html>
 a:link - a normal, unvisited link <head>
 a:visited - a link the user has visited <style>
 a:hover - a link when the user mouse over it a:link {
 a:active - a link the moment it is clicked background-color: yellow;
}
Example:
a:visited {
<!DOCTYPE html> background-color: cyan;
<html> }
<head>
<style> a:hover {
/* unvisited link */ background-color: lightgreen;
a:link { }
color: red;
} a:active {
background-color: hotpink;
/* visited link */ }
a:visited { </style>
color: green; </head>
} <body>
/* mouse over link */ <p><b><a href="default.asp" target="_self">This is a

a:hover { link</a></b></p>
color: hotpink; <p><b>Note:</b> a:hover MUST come after a:link and
} a:visited in the CSS definition in order to be
effective.</p>
/* selected link */ <p><b>Note:</b> a:active MUST come after a:hover in
a:active { the CSS definition in order to be effective.</p>
color: blue;
} </body>
</style> </html>
</head>
<body> Advanced - Link Buttons
<p><b><a href="default.asp" target="_self">This is a This example demonstrates a more advanced example

link</a></b></p> where we combine several CSS properties to display
<p><b>Note:</b> a:hover MUST come after a:link and links as boxes/buttons:
a:visited in the CSS definition in order to be
effective.</p> <!DOCTYPE html>
<p><b>Note:</b> a:active MUST come after a:hover in <html>
the CSS definition in order to be effective.</p> <head>
<style>
</body> a:link, a:visited {
</html> background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
} </head>
<body>
a:hover, a:active {
background-color: red; <p>In this example, we remove the bullets from the list,
} and its default padding and margin.</p>
</style>
</head> <ul>
<body> <li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<a href="default.asp" target="_blank">This is a link</a> <li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</body> </ul>
</html>
</body>
</html>
Navigation Bar = List of Links
 list-style-type: none; - Removes the bullets. A
A navigation bar needs standard HTML as a base. navigation bar does not need list markers
 Set margin: 0; and padding: 0; to remove
A navigation bar is basically a list of links, so using the browser default settings
<ul> and <li> elements makes perfect sense:
Vertical Navigation Bar
<!DOCTYPE html>
<html> To build a vertical navigation bar, you can style the <a>
<body> elements inside the list, in addition to the code above:
<ul> <!DOCTYPE html>

<li><a href="#home">Home</a></li> <html>
<li><a href="#news">News</a></li> <head>
<li><a href="#contact">Contact</a></li> <style>
<li><a href="#about">About</a></li> ul {
</ul> list-style-type: none;
margin: 0;
<p>Note: We use href="#" for test links. In a real web padding: 0;
site this would be URLs.</p> width: 200px;
background-color: #f1f1f1;
</body> }
</html>
li a {
display: block;
Now let's remove the bullets and the margins and color: #000;
padding from the list: padding: 8px 0 8px 16px;
<!DOCTYPE html> }
<html>
<head> /* Change the link color on hover */
<style> li a:hover {
ul { background-color: #555;
list-style-type: none; color: white;
margin: 0; }
padding: 0; </style>
} </head>
</style> <body>
<p>In this example, we create an "active" class with a
<h2>Vertical Navigation Bar</h2> green background color and a white text. The class is
added to the "Home" link.</p>
<ul>
<li><a href="#home">Home</a></li> <ul>
<li><a href="#news">News</a></li> <li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#news">News</a></li>
<li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li>
</ul> <li><a href="#about">About</a></li>
</ul>
</body>
</html> </body>
</html>
Active/Current Navigation Link
Horizontal Navigation Bar Examples
Add an "active" class to the current link to let the user
know which page he/she is on: Create a basic horizontal navigation bar with a dark
background color and change the background color of
<!DOCTYPE html> the links when the user moves the mouse over them:
<html>
<head> <!DOCTYPE html>
<style> <html>
ul { <head>
list-style-type: none; <style>
margin: 0; ul {
padding: 0; list-style-type: none;
width: 200px; margin: 0;
background-color: #f1f1f1; padding: 0;
} overflow: hidden;
background-color: #333;
li a { }
display: block;
color: #000; li {
padding: 8px 0 8px 16px; float: left;
text-decoration: none; }
}
li a {
li a.active { display: inline-block;
background-color: #4CAF50; color: white;
color: white; text-align: center;
} padding: 14px 16px;
li a:hover:not(.active) { }
color: white; li a:hover {
} background-color: #111;
</style> }
</head> </style>
<body> </head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li> Right-Align Links
<li><a href="#contact">Contact</a></li> Right-align links by adding a new <ul> inside the <ul>
<li><a href="#about">About</a></li> with float:right;:
</ul>
<!DOCTYPE html>
</body> <html>
</html> <head>
<style>
Active/Current Navigation Link ul {
list-style-type: none;
<!DOCTYPE html> margin: 0;
<html> padding: 0;
<head> overflow: hidden;
<style> background-color: #333;
ul { }
list-style-type: none;
margin: 0; li {
padding: 0; float: left;
overflow: hidden; }
} li a {
display: block;
li { color: white;
float: left; text-align: center;
} padding: 14px 16px;
li a { }
display: block;
color: white; li a:hover:not(.active) {
text-align: center; background-color: #111;
padding: 14px 16px; }
} .active {
background-color: #4CAF50;
li a:hover:not(.active) { }
background-color: #111; </style>
} </head>
<body>
.active {
background-color: #4CAF50; <ul>
} <li><a href="#home">Home</a></li>
</style> <li><a href="#news">News</a></li>
</head> <li><a href="#contact">Contact</a></li>
<body> <ul style="float:right;list-style-type:none;">
<li><a class="active" href="#about">About</a></li>
<ul> <li><a href="#login">Login</a></li>
<li><a class="active" href="#home">Home</a></li> </ul>
<li><a href="#news">News</a></li> </ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li> </body>
</ul> </html>
</body>
</html>
Dropdown Dropdown Menu
A dropdown box appears when the user moves the <!DOCTYPE html>
mouse over an element. <html>
<head>
Example: <style>
.dropbtn {
<!DOCTYPE html> background-color: #4CAF50;
<html> color: white;
<head> padding: 16px;
<style> font-size: 16px;
.dropdown { border: none;
position: relative; cursor: pointer;
display: inline-block; }
}
.dropdown {
.dropdown-content { position: relative;
display: none; display: inline-block;
position: absolute; }
background-color: #f9f9f9;
min-width: 160px; .dropdown-content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); display: none;
padding: 12px 16px; position: absolute;
} background-color: #f9f9f9;
min-width: 160px;
.dropdown:hover .dropdown-content { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block; }
}
</style> .dropdown-content a {
</head> color: black;
<body> padding: 12px 16px;
<h2>Hoverable Dropdown</h2> display: block;
<p>Move the mouse over the text below to open the }
dropdown content.</p>
.dropdown-content a:hover {background-color: #f1f1f1}
<div class="dropdown">
<span>Mouse over me</span> .dropdown:hover .dropdown-content {
<div class="dropdown-content"> display: block;
<p>Hello World!</p> }
</div>
</div> .dropdown:hover .dropbtn {
background-color: #3e8e41;
</body> }
</html> </style>
</head>
<body>
The .dropdown-content class holds the actual
dropdown content. <h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the
dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content"> }
<a href="#">Link 1</a> img:hover {
<a href="#">Link 2</a> opacity: 1.0;
<a href="#">Link 3</a> filter: alpha(opacity=100); /* For IE8 and earlier */
</div> }
</div> </style>
</head>
<p><strong>Note:</strong> We use href="#" for test <body>
links. In a real web site this would be URLs.</p> <h1>Image Transparency</h1>
</body> <img src="pic.jpg" width="150" height="113" alt="pic">
</html> <img src="pic2.jpg" width="150" height="113"
alt="pic2">
CSS Image Opacity / Transparency
<p><b>Note:</b> In IE, a !DOCTYPE must be added for
Opacity is defined as the condition of lacking the :hover selector to work on other elements than the
transparency or translucence; opaqueness. a element.</p>
</body>
Example: </html>
<!DOCTYPE html>
<html> Text in Transparent Box
<head>
<style> <!DOCTYPE html>
img { <html>
opacity: 0.4; <head>
filter: alpha(opacity=40); /* For IE8 and earlier */ <style>
} div.background {
</style> background: url(klematis.jpg) repeat;
</head> border: 2px solid black;
<body> }
div.transbox {
<h1>Image Transparency</h1> margin: 30px;
<img src="picture.jpg" width="150" height="113" background-color: #ffffff;
alt="this is a picture of…"> border: 1px solid black;
opacity: 0.6;
</body> filter: alpha(opacity=60); /* For IE8 and earlier */
</html> }
div.transbox p {
The opacity property can take a value from 0.0 - 1.0. margin: 5%;
The lower value, the more it goes transparent. font-weight: bold;
color: #000000;
IE8 and earlier use filter:alpha(opacity=x). The x can }
take a value from 0 - 100. A lower value makes the </style>
element more transparent. </head>
<body>
Image Transparency - Hover Effect <div class="background">
<div class="transbox">
<!DOCTYPE html> <p>This is some text that is placed in the transparent
<html> box.</p>
<head> </div>
<style> </div>
img { </body>
opacity: 0.4; </html>
filter: alpha(opacity=40); /* For IE8 and earlier */

CSS Border and Padding Properties Guide

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Border and Padding Properties Guide

Uploaded by

Copyright:

Available Formats

CSS Border Properties A double border.

 dotted - Defines a dotted border

<h2>The border Property</h2> <h2>Using Individual padding Properties:</h2>

</body> <!DOCTYPE html>

<!DOCTYPE html> .tooltip .tooltiptext {

.tooltip .tooltiptext { /* Position the tooltip */

.tooltip:hover .tooltiptext { <div class="tooltip">Hover over me

/* Fade in tooltip - takes 1 second to go from 0% to

<h2>Fade In Tooltip on Hover</h2>

will fade in and take 1 second to go from completely

<div class="tooltip">Hover over me

The four links states are: <!DOCTYPE html>

/* mouse over link */ <p><b><a href="default.asp" target="_self">This is a

<p><b><a href="default.asp" target="_self">This is a This example demonstrates a more advanced example

<ul> <!DOCTYPE html>

You might also like