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.


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:


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:


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:
#idd {
border-style: outset;
border-width: 3px;
border-color: blue;

<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:
#idd {
border-left: 4px outset red;
border-right: 4px outset green;
border-bottom: 2px dashed blue;

<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.

#idd {
border: 2px solid blue;
border-bottom: none;

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

Daily Test with Code Example

Which tag is used in <table> to create table header cell?
<thead> <th> <td>
  <th>Title 1</th>
  <th>Title 2</th>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
CSS Border

Last accessed pages

  1. How to use php variable in external js file (366)
  2. Zodiac Signs PHP code (4470)
  3. The Stage, Panels and Tools in Flash (7508)
  4. Execute JavaScript scripts loaded via AJAX (5275)
  5. PHP MySQL - WHERE and LIKE (23086)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (522)
  2. Register and show online users and visitors (363)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (273)
  4. querySelector and querySelectorAll (267)
  5. JavaScript Course - Free lessons (265)