Bordes - Tutorial, CSS, HTML

Bordes
Par GloriaV le 29 Juillet 2015 à 19:19

Bordes para videos, tablas, fondos...

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

-webkit-box-shadow: 5px 5px 8px #818181;-moz-box-shadow: 5px 5px 8px #818181;-moz-border-radius-topleft: 25px;-moz-border-radius-bottomright: 25px;-webkit-border-top-left-radius: 25px;-webkit-border-bottom-right-radius: 25px;

-moz-border-radius: 9px 3px 9px 3px;-webkit-border-radius: 3px;-webkit-border-top-left-radius: 9px;-webkit-border-bottom-right-radius: 9px;

votre commentaire
Par GloriaV le 29 Juillet 2015 à 19:24

border-radius: 50px 50px 0 0 / 25px 25px 0 0;

border-radius: 0 0 15px 15px / 0 0 30px 30px;

border-radius: ulx urx lrx llx / uly ury lry lly;

border-radius: 10em 0 5em 2em;

votre commentaire
Par GloriaV le 29 Juillet 2015 à 19:28

<style> .radius { width: 200px; height: 200px; border: 7px dashed red; border-radius: 100%/20%; } </style> <div class="radius">...</div>

border-radius: 60px 100px 100px 10px;

border-radius:66px 0 44px 0;

border-radius:5px 100px 50px 13px;

votre commentaire

Par GloriaV le 29 Juillet 2015 à 19:32

1 px	3 px	5 px	7 px
dotted	dotted	dotted	dotted
dashed	dashed	dashed	dashed
solid	solid	solid	solid
double	double	double	double
groove	groove	groove	groove
ridge	ridge	ridge	ridge
inset	inset	inset	inset
outset	outset	outset	outset

votre commentaire

Par GloriaV le 29 Juillet 2015 à 19:39

http://www.w3.org/TR/css3-background/#corner-transitions

p { width: 70px; height: 70px; border: solid 30px;
    border-color: orange orange silver silver;
    border-top-right-radius: 100%; }

bordes

votre commentaire

Par GloriaV le 30 Juillet 2015 à 11:47

border-radius: 1em 4em 1em 4em;

border-radius: 25px 10px / 10px 25px;

border-radius: 0.5em 2em 0.5em 2em;

border-top-left-radius: 150px 100px;
border-top-right-radius: 150px 100px;
border-bottom-right-radius: 150px 100px;
border-bottom-left-radius: 150px 100px;

votre commentaire
Par GloriaV le 30 Juillet 2015 à 11:58

<style>
.radius {
width: 200px;
height: 300px;
border-radius: 80% / 100% 100% 60% 60%;
background: #fabf74;
}
</style>
<div class="radius">...</div>

<style> .radius { width: 200px;
height: 200px;
border-radius: 60% 80% / 100% 90% 60% 50%; background: #19e5e1; } </style> <div class="radius">...</div>

border-radius: 40% 30% / 50% 20% 10% 30%;

border-radius: 30% 10% / 20% 50% 30% 40%;

votre commentaire
Par GloriaV le 30 Juillet 2015 à 12:00

http://www.w3.org/TR/css3-background/transition-region.png

votre commentaire

Par GloriaV le 30 Juillet 2015 à 12:02

Valores

radius		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-left		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-left		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-right		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-right		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-left		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
`inherit`		Is a keyword indicating that all four values are inherited from their parent's element calculated value.

votre commentaire

Par GloriaV le 30 Juillet 2015 à 12:08

border-radius: 10%; border-top-left-radius: 150px 100px;

border-radius: 40px 10px;

border-radius: 1em/5em;

/* es equivalente a: */
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:14px 43px 26px/12px 24px;

/* es equivalente a: */
border-top-left-radius: 14px 12px;
border-top-right-radius: 43px 24px;
border-bottom-right-radius: 26px 12px;
border-bottom-left-radius: 43px 24px;

votre commentaire
Par GloriaV le 5 Septembre 2016 à 18:30

border-color: red green blue yellow

HTML

<table style="border-width: 10; width: 250; border-color: red green blue yellow; border-style: ridge;"><tbody><tr><td>border-color: red green blue yellow</td></tr></tbody></table>

votre commentaire
Par GloriaV le 5 Septembre 2016 à 18:45

http://debray-jerome.developpez.com/articles/geometrie-avec-css/

border-radius: 13em/3em;

border: 1px solid #069; border-color: transparent transparent #069 transparent; border-width: 60px;

width:300px; height:100px; background:#069; -webkit-transform:skew(30deg); -moz-transform:skew(30deg); -o-transform:skew(30deg); tranform:skew(30deg);

border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px;

votre commentaire
Par GloriaV le 22 Décembre 2016 à 09:54

votre commentaire
Par GloriaV le 21 Juin 2017 à 17:44

Border-radius: 15px 50px 30px 5px:

Border-radius: 15px 50px 30px:

Border-radius: 15px 50px:

votre commentaire
Par GloriaV le 21 Juin 2017 à 17:47

Border-radius: 50px/15px:

Border-radius: 15px/50px:

Border-radius: 50%:

votre commentaire