CSS Border properties draw different line styles around HTML elements.

border-color, border-style, border-width

To display a border around a HTML element you have to define the fallowing properties: border-color, border-style, border-width.


border-color

The border-color property sets the color of the border.

- Values: You can also set the border color to transparent.
- Syntax:
border-color: value;

The 'border-color' does not work if it is used alone. You need to use the 'border-style' property to set the borders first.


• You can also set individual border color values for each side, with the fallowing properties:

border-style

The border-style property specifies what kind of border to display. You can define one of the fallowing values.

none, solid, dashed, dotted, double, groove, ridge, inset, outset
- none specifies no border.
In the image below you can see the effect of the other values:
css border-style - Syntax:
border-style: value;
• You can also set individual border style values for each side, with the fallowing properties:

border-width

The border-width sets the size of the border.
The value of this property is set in pixels, or by one of the three pre-defined values: thin, medium, or thick.

- Syntax:
border-width: value;
• You can also set individual border width values for each side, with the fallowing properties:
Example:
<style>
#idd {
border-style: outset;
border-width: 3px;
border-color: blue;
padding:3px;
}
</style>

<h4>Example CSS border-style, border-width, border-color</h4>
<div id='idd'>Free Web Development courses and resources.</div>

Border Property

Using the border property you can shorten the code. It accept three values representing border-width, border-style, and border-color.

- Syntax:
selector { border: width_val style_val color_val; }
The CSS code from the above example can be rewritten like this (the effect is the same):
#idd { border: 3px outset blue; }

• You can also set border shorthand property values for each side, with the fallowing syntaxes:
Example:
<style>
#idd {
border-left: 4px outset red;
border-right: 4px outset green;
border-bottom: 2px dashed blue;
padding:3px;
}
</style>

<h4>Example border-left, border-right, border-bottom</h4>
 <div id='idd'>If the life is a dream, where and who is the dreamer?</div>

Annul /Remove border

To annul /remove border, use the none value.
- In the following example it is set a border for all margins, then it is removed the bottom border.

<style>
#idd {
border: 2px solid blue;
border-bottom: none;
padding:3px;
}
</style>

<h4>Example css border property</h4>
 <div id='idd'>Wake Up the Truth.</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
CSS Border

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (17702)
  2. Disable button and Enable it after specified time (8002)
  3. CSS cursor property - Custom Cursors (4008)
  4. Animating in Flash - Frame-by-Frame Animation (2031)
  5. JpGraph - Create Graph, Charts, Plots in PHP (1321)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1270)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1241)
  3. Tabs effect with CSS (1227)
  4. Contact page - CoursesWeb (1225)
  5. Insert, Select and Update NULL value in MySQL (729)