CSS - BORDERS + OUTLINES + RADIUS v.1

============================BORDER ===============
============================
======== CSS - BORDERS + OUTLINES + RADIUS  v.1 - POSTé
============================

BORDERS + OUTLINES


========================================
======== REMOVE DOTTED OUTLINE ON LINKS IN FIREFOX
== http://snipplr.com/view/5026/
    a:active,
	a:focus {
    outline: 0;
    }

========================================
======== REMOVE OUTLINE ON BUTTONS IN FIREFOX
== http://snipplr.com/view/38859/

    button::-moz-focus-inner { border: 0; }


========================================
======== REMOVE DOTTED FOCUS BORDER IN FIREFOX
== http://snipplr.com/view/16931/
    button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
    }



========================================
======== BORDER - Bordures en CSS
==http://css.mammouthland.net/border-css.php
Fonctionne avec :(Presque) Tous les navigateurs graphiques
Propriétés utilisées :
    border-width
    border-style
    border-color
    padding

border-style :
    dotted (pointillé)
    dashed (tirets)
    solid (solide)
    double (double)
    groove (rainurée)
    ridge (relief)
    inset (relief intérieur)
    outset (relief extérieur)

div {
 border-width: 1px 2px 3px 2px;
 border-style: solid dotted;
 border-color: black red;
 padding:0 10px;
 }

- Une seule bordure
Si on veut se limiter à une seule bordure (par exemple pour "souligner" un titre),
on pourra adopter la syntaxe suivante :
h2 {
 border-bottom:1px dashed green;
 }



=========== BORDER - TABLE : border-spacing
== http://www.w3schools.com/cssref/pr_border-spacing.asp
Set the border-spacing for a table:
 - distance between the borders of adjacent cells (only for the "separated borders" model).
EXAMPLE :
table
{
border-collapse:separate;
border-spacing:10px 50px;
}
==
table.ex1 {
    border-collapse: separate;
    border-spacing: 10px;
}

table.ex2 {
    border-collapse: separate;
    border-spacing: 10px 80px;
}

The border-spacing property sets the distance between the borders
of adjacent cells (only for the "separated borders" model).

== length length 	Specifies the distance between the borders of adjacent cells in px, cm, etc.
== Negative values are not allowed

    If one length value is specified, it specifies both the horizontal and vertical spacing
    If two length values are specified, the first sets the horizontal spacing and the second sets the vertical spacing

inherit
Specifies that the value of the border-spacing property
should be inherited from the parent element

table.ex1
{
border-collapse:separate;
border-spacing:10px;
}
table.ex2
{
border-collapse:separate;
border-spacing:10px 50px;
}

============================
=========== BORDER ELLIPTIQUE = 2 valeurs séparées par un slash (/) = 20px / 10px;
== Créer des courbes elliptiques. (/) :  border-radius: 20px / 10px;
 Il faut indiquer 2 valeurs séparées par un slash (/).
    border-radius: 20px / 10px;

============================
=========== -MOZ-OUTLINE-RADIUS
In Mozilla applications like Firefox, the -moz-outline-radius CSS property can be used
to give outlines rounded corners. An outline is a line that is drawn around elements,
outside the border edge, to make the element stand out.

2 single value applies to all 4 corners
2 values apply to :
	1. topLeft and bottomRight and 2. to the topRight and bottomLeft corner
3 values apply to :
	1. topLeft, 2. topRight and bottomLeft and 3. to the bottomRight corner
4 values apply to :
	1. topLeft, 2. topRight, 3. bottomRight and 4. to the bottomLeft corner

EXAMPLE PERSO :
.page-content ul {
    -moz-outline-radius: 12% 1em 25px 1em !important;
    outline: 1px solid red;
}
============================
=========== OUTLINE-COLOR : INVERT
==
INVERT :
FIREFOX Not supported 	Support had been dropped since 3.0 (1.9)
outline-color: invert !important;

============================
=========== OUTLINE-OFFSET
==http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
The outline-offset property offsets an outline, and draws it beyond the border edge.

exemple:
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:10px;

exemple perso:
border-radius: 3px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    -moz-outline-radius: 3px !important;
    outline-offset: -3px !important;
    outline: 1px dotted gray !important;
    border: 2px solid #222222 !important;
============================
=========== BORDER RADIUS
sidebarheader
	{-moz-appearance: none !important;
         border-top: none !important;
         /*background-image: -moz-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) !important; }*/5usbtnar@


		 /* === ARRONdir box ===*/
		 border-radius: 2px 2px 2px 2px;
		     border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;

	.site_nav_menu_buttons li, #candy_search_button_bar li { {
    background-color: #222222 !important;
    border: 6px solid #222222 !important;
    border-radius: 10px 10px 10px 10px !important;
    color: #CCCCCC !important;
}

border-radius: 20px 20px 20px 20px !important;


============================
===========  border-radius: 50% draws a perfect circle - My theory on border-radius (depending on the size of the element):
== http://tympanus.net/codrops/2012/10/23/basic-ready-to-use-css-styles/
    At 0px, you have sharp angles. True story.
    Between 1 and 4px, you have subtle rounded corners. Most people won’t be able to tell corners are rounded, but they won’t have the “sharp knife” impression.
    Between 5 and 10px, you have rounded corners. Not more, not less. Depending on the design, it can look very cheap, or absolutely lovely.
    After 10px, you have -in my opinion- ugly rounded corners. It looks like you’re trying to recreate the “we do because we can” thing from the past. Plus, as I said earlier, the trend isn’t much into round corners any more.

There are two values you should remember when you’re using the border-radius property:

    border-radius: 50% draws a perfect circle as long as you’re dealing with a square.
If it’s a rectangle, then you’ll turn it into an ellipse.
    In order to achieve icon-like border-radius, the perfect ratio is 6.4 .
	So if you have a 100*100px square and want to turn it into an icon, you should apply it 16px border-radius (100 / 6.4 = 15.625).

============================
======== BORDER ARRONDIS - (border-radius)
==http://css.mammouthland.net/border-css.php
div {
 padding:0 10px;
 border:3px double black;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }

============================
======== BORDER ARRONDIS
== http://www.siteduzero.com/tutoriel-3-561853-les-bordures-et-les-ombres.html
On peut utiliser jusqu'à 3 valeurs pour modifier l'apparence de la bordure :
    La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).
    La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ("black", "red"...), soit une valeur hexadécimale (#FF0000), soit une valeur rgb (rgb(198, 212, 37)).
    Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc... Voici les différentes valeurs disponibles :
        none : pas de bordure (par défaut)
        solid : un trait simple.
        dotted : pointillés.
        dashed : tirets.
        double : bordure double.
        groove : en relief.
        ridge : autre effet relief.
        inset : effet 3D enfoncé.
        outset : effet 3D surélevé.
Bordures différentes en fonction du côté (haut, bas, gauche ou droite).
Dans ce cas, vous devrez utiliser ces 4 propriétés :
    border-top : bordure en haut.
    border-bottom : bordure en bas.
    border-left : bordure à gauche.
    border-right : bordure à droite.

Il existe aussi des équivalents pour paramétrer chaque détail de la bordure
si vous le désirez :
 border-top-width pour modifier l'épaisseur de la bordure du haut, border-top-color pour la couleur du haut, etc.
Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc :
{
    border-left: 2px solid black;
    border-right: 2px solid black;
}
On peut modifier les bordures de n'importe quel type d'élément sur sa page.
 Nous l'avons fait ici sur les paragraphes, mais on peut aussi modifier la bordure de ses images,
 des textes importants comme <strong>, etc.
=== Bordures arrondies : border-radius en pixels :
    border-radius: 10px;

L'arrondi se voit notamment si l'élément a des bordures :
On peut aussi préciser la forme de l'arrondi pour chaque coin.
 Dans ce cas, indiquez 4 valeurs :
    border-radius: 10px 5px 10px 5px;
correspondant aux angles suivants dans cet ordre :
    En haut à gauche
    En haut à droite
    En bas à droite
    En bas à gauche



============================
======== BORDER-RADIUS
== https://developer.mozilla.org/en-US/docs/CSS/border-radius
The radius applies to the whole background, even if the element has no border;
the exact position of the clipping is defined by the background-clip property.

SYNTAX :

Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

The syntax of the first radius allows one to four values:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left

The syntax of the second radius also allows one to four values
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left

border-radius: inherit


VALUES :

<length>
    Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis.
	It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
<percentage>
    Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis,
	using percentage values. Percentages for the horizontal axis refer to the width of the box,
	percentages for the vertical axis refer to the height of the box. Negative values are invalid.

FOR EXAMPLE:

border-radius: 1em/5em;

/* is equivalent to */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;


EXAMPLES  :

  border: solid 10px;
  /* the border will curve into a 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;