CSS border padding

Next Page >>
div class container

CSS Tutorial » CSS border padding

Study in this chapter:
1. - How can you add padding to a border CSS?
2. - padding top, right, bottom, left
3. - border-spacing:

CSS padding properties are used to generate space around the content of an inside element / border, defined as top, bottom, left, right. With CSS, you can have full control and give any value to the padding. There are properties for setting padding for each side of an element (top, right, bottom, and left).

We can add border padding to an element as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css

Syntax:

Syntax: Internal & External CSS.

border: value;
padding: value;

Syntax: Inline CSS.

Note: use external CSS instead.

Example:

This element has a 6px blue border and 16px padding
(padding - space around the text or better said is
the space between the border and the text inside an element)

Browser Support CSS border padding

Element	Chrome	IE	Firefox	Opera	Safari
CSS border padding	Yes	Yes	Yes	Yes	Yes

CSS border padding top, right, bottom, left

Definition and Usage:
border-top-width: 1px; property sets the thickness of an element to the top border.
border-right-width: 2px; property sets the thickness of an element to the right-width border.
border-bottom-width: 3px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: none;
border-top-color: #F00;
border-right-color: #0F0;
border-bottom-color: #00F;
padding: 12px;
background-color: #6FF;

Example:

<!DOCTYPE html>

<html>



<head>

<title>Box</title>

<style>

.box11{

border-top-width: 1px;

border-right-width: 2px;

border-bottom-width: 3px;

border-top-style: solid;

border-right-style: dashed;

border-bottom-style: dotted;

border-left-style: none;

border-top-color: #F00;

border-right-color: #0F0;

border-bottom-color: #00F;

padding: 20px;

background-color: #6FF;

}



body {

background-color: #E9E9E9;

}

</style>

</head>



<body>

<div class="box11">

<strong>Welcome to AgerNic Tutorial for this box we use:</strong><br />

border-top-width: 1px;<br>

border-right-width: 2px;<br>

border-bottom-width: 3px;<br>

border-top-style: solid;<br>

border-right-style: dashed;<br>

border-bottom-style: dotted;<br>

border-left-style: none;<br>

border-top-color: #F00;<br>

border-right-color: #0F0;<br>

border-bottom-color: #00F;<br>

padding: 12px;<br>

background-color: #6FF;</div>

</body>



</html>

CSS paddings are used to create a space around the box inside any defined border to enhance the web page design. We can set different pads for individual parts as top, right, bottom, left.

Related subjects:
Border Radius Border Style border width

CSS border padding top and, bottom

for this box we use: border-top-width: 4px; border-bottom-width: 8px; border-top-style: solid; border-bottom-style: dotted; border-top-color: #F00; border-bottom-color: #00F; padding: 20px; background-color: #6FF;

Example:

<!DOCTYPE html>

<html>



<head>

<title>Box</title>

<style>

.box11{

border-top-width: 4px;

border-bottom-width: 8px;

border-top-style: solid;

border-bottom-style: dotted;

border-top-color: #F00;

border-bottom-color: #00F;

padding: 20px;

background-color: #6FF;

}



body {

background-color: #E9E9E9;

}

</style>

</head>



<body>

<div class="box11">

<strong>Welcome to AgerNic Tutorial for this box we use:</strong><br />

border-top-width: 4px;

border-bottom-width: 8px;

border-top-style: solid;

border-bottom-style: dotted;

border-top-color: #F00;

border-bottom-color: #00F;

padding: 20px;

background-color: #6FF;</div>

</body>



</html>

Tags: border padding not working, code, what is, How do you put a space between borders and divs? What is border padding in CSS?

border-spacing property

The border-spacing CSS property is used to set the distance between the borders of cells in a <table>. This property only applies when the border collapse is separated.

Example:

<!DOCTYPE html>

  <html>

  <head>

  <style>

  table, td, th {

  border: 2px solid red;

  }
#table11 {

  border-spacing: 20px;

  border-collapse: separate;

  }
#table22 {

  border-spacing: 25px 60px;

  border-collapse: separate;

  }

  </style>

  </head>

  <body>
<h2>border-spacing: 20px:</h2>

  <p>When using "border-collapse: separate", the border-spacing property 20px can be used to set the space between the cells:</p>

  <table id="table11">

  <tr>

  <th>F_name</th>

  <th>L_name</th>

  </tr>

  <tr>

  <td>Petere</td>

  <td>Griffinh</td>

  </tr>

  <tr>

  <td>Loise</td>

  <td>Griffinh</td>

  </tr>

  </table>
<h2>border-spacing: 25px 60px:</h2>

  <p>Using two values (the first (25px) sets the horizontal spacing and the second (60px) sets the vertical spacing):</p>

  <table id="table22">

  <tr>

  <th>F_tname</th>

  <th>L_name</th>

  </tr>

  <tr>

  <td>Petere</td>

  <td>Griffinh</td>

  </tr>

  <tr>

  <td>Loise</td>

  <td>Griffinh</td>

  </tr>

  </table>
</body>

  </html>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

border padding not working, code, what is, How do you put a space between borders and divs? What is border padding in CSS?
CSS border padding - css tutorial

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.