Css Course


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 tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
CSS Border

Last accessed pages

  1. Calling Function and Class Method with Name from String (5792)
  2. Working with HTML attributes in PHP (13579)
  3. Get Mime Type of file or string content in PHP (6148)
  4. Disable button and Enable it after specified time (17416)
  5. Redirects (4874)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (270)
  2. Read Excel file data in PHP - PhpExcelReader (63)
  3. The Mastery of Love (59)
  4. PHP Unzipper - Extract Zip, Rar Archives (58)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (42)