Joomla! Amazônia – Seu site de tutorial e curso de Joomla

Manchetes:
Você está aqui: CSS Propriedades do CSS border

Propriedades do CSS border


border-width

Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border-style) seja definido.

Por exemplo:

border-style: solid

A espessura das bordas pode ser controlada através da propriedade border-width, afetando as espessuras de todos os lados da borda, ou individualmente através de border-top-width, border-bottom-width, border-right-width e border-left-width.

Sintaxe:

border-top-width: comprimento | thin | medium | thick
border-bottom-width: comprimento | thin | medium | thick
border-right-width: comprimento | thin | medium | thick
border-left-width: comprimento | thin | medium | thick

Exemplos:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-bottom-width: thick;
border-right-width: 5.5px;
border-left-width: 1.2cm;
border-top-width: medium;
border-color:#F00000;
border-style:solid;
}
-->
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.</p>
</div>
</body>
</html>

Veja como fica:
img42

As propriedades das bordas podem ser tratadas em grupo, com border-width. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas).

Sintaxe:

border-width: border-top-width border-right-width border-bottom-width border-left-width

Exemplos:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-width: 1px; /* vale para as quatro bordas */
border-style:solid
}

#box2{
border-width: 8px 3px; /*5cm verticais, 2cm horizontais */
border-style:solid
}

#box3{
border-width: 7px 5px 3px 1px; /* horário: top, right, bottom, left */
border-style:solid
}
-->
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos</p></div><br>
<div id="box2">
<p>Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos</p></div><br> 
<div id="box3">
<p>Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos</p></div><br>
</body>
</html>

Veja como fica:
img43

border-color

A propriedade border-color é um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que também podem ser definidas indivi-dualmente através de border-top-color, border-bottom-color, border-right-color e border-left-color.

border-top-color: cor (nome ou código)
border-bottom-color: cor (nome ou código)
border-right-color: cor (nome ou código)
border-left-color: cor (nome ou código)

Exemplos:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-bottom-color: rgb(231,45,112);
border-right-color: 0fa97b;
border-left-color: navy;
border-top-color: #FF0;
border-style:solid;
}
-->
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos</p></div><br>
</body>
</html>
Veja como fica:
img44

As propriedades das bordas podem ser tratadas em grupo, com border-color. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:

border-color: border-top-color border-right-color border-bottom-color border-left-color

Cada um dos border-xxx-color acima é uma cor (RGB, hexadecimal ou nome). Podese alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente.

Exemplos:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-color: red; /* red para as quatro bordas*/
border-style:solid;
}

#box2{
border-color: rgb(255, 0, 0) ; /* red */
border-style:solid;
}

#box3{
border-color: rgb(100%, 0, 0) ; /* red */
border-style:solid;
}

#box4{
border-color: red 0000ff ; /* red verticais, 0000ff horizontais*/
border-style:solid;
}

#box5 {
border-color: red blue yellow cyan; /* 4 cores sentido horário */
border-style:solid;
}
-->
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS </p></div><br>
<div id="box2">
<p>Para cada propriedade apresento as regras CSS </p></div><br>
<div id="box3">
<p>Para cada propriedade apresento as regras CSS </p></div><br>
<div id="box4">
<p>Para cada propriedade apresento as regras CSS</p></div><br>
<div id="box5">
<p>Para cada propriedade apresento as regras CSS </p></div><br>
</body>
</html>

Veja como fica:
img45

border-style

O estilo de cada uma das quatro bordas pode ser alterado com border-style. Também é possível defini-los individualmente usando border-top-style, border-bottom-style, border-right-style e border-left-style. São vários os estilos disponíveis (tracejado, pontilhado, várias versões de 3D, etc.).

Sintaxe:

border-top-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-style: nome de estilo (um dos nomes acima)
border-right-style: nome de estilo
border-left-style: nome de estilo
Exemplos:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-bottom-style: solid;
border-left-style:dashed;
border-right-style:double;
border-top-style:groove;
}

#box2{
border-bottom-style: hidden;
border-left-style: inherit;
border-right-style: inset;
border-top-style: none;
}

#box3{
border-bottom-style: outset;  
border-left-style: ridge;
border-right-style: solid;
border-top-style: none;
}
-->
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS box1 </p></div><br>
<div id="box2">
<p>Para cada propriedade apresento as regras CSS box2</p></div><br>
<div id="box3">
<p>Para cada propriedade apresento as regras CSS box3</p></div><br>
</body>
</html>

Veja como fica:
img46


As propriedades das bordas podem ser tratadas em grupo, com border-style. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas).

Sintaxe:

border-style: border-top-style border-right-style border-bottom-style border-left-style

Exemplos:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-style: solid none inset outset;
}

#box2{
border-style: solid;
}

#box3{
border-style: inset outset;
}
-->
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS box1 </p></div><br>
<div id="box2">
<p>Para cada propriedade apresento as regras CSS box2</p></div><br>
<div id="box3">
<p>Para cada propriedade apresento as regras CSS box3</p></div><br>
</body>
</html>

Veja como fica:
img47

Cada um dos border-xxx-style acima é um dos seguintes valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer, funcionam os estilos solid, inset (efeito baixo-relevo) e outset (efeito alto-relevo). No Netscape solid é default mas no Explorer, o default é none, portanto, uma borda não aparece se a propri-edade border-style não for definida antes.

border

As propriedades border-top, border-bottom, border-left e border-right cor, estilo e espessura para cada uma das quatro bordas.

Sintaxe:

border-top: border-width border-style border-color
border-bottom: border-width border-style border-color
border-left: border-width border-style border-color
border-right: border-width border-style border-color

Exemplo:

<html>
<head>
<style type="text/css">
<!--
#box1{
border-top:  2px solid #F00;
border-bottom: 1px double  #FF0;
border-left: 5px groove #0C0;
border-right: 3px dashed #F0F;
}
-->   
</style>
</head>
<body>
<div id="box1">
<p>Para cada propriedade apresento as regras CSS box1 </p></div><br>
</body>
</html>

Veja como fica:
img48











A propriedade border é uma forma reduzida de definir tudo isto de uma vez só para todas as bordas e de forma idêntica (não é possível especificar valores diferentes para as bordas neste caso). Todos os itens não precisam aparecer, mas a ordem dos fatores é importante:

border: border-width border-style border-color

Exemplo:

<html>
<head>
<style type="text/css">
<!--
p{
border: 2px solid #00F
}
-->   
</style>
</head>
<body>
<p>Para cada propriedade apresento as regras CSS box1 </p>
</body>
</html>

Veja como fica: agrupam as propriedades de
img49


18.2. border-width

Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border-style) seja definido. Por exemplo:

border-style: solid

A espessura das bordas pode ser controlada através da propriedade border-width, afetando as espessuras de todos os lados da borda, ou individualmente através de border-top-width, border-bottom-width, border-right-width e border-left-width. Sintaxe:

border-top-width: comprimento | thin | medium | thick
border-bottom-width: comprimento | thin | medium | thick
border-right-width: comprimento | thin | medium | thick
border-left-width: comprimento | thin | medium | thick

Exemplos:

border-bottom-width: thick; border-right-width: 5.5px;
border-left-width: 0.2cm

As propriedades das bordas podem ser tratadas em grupo, com border-width. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas).

Sintaxe:

border-width: border-top-width border-right-width
border-bottom-width border-left-width
Exemplos:

border-width: 5cm // vale para as quatro bordas
border-width: 5cm 2cm // 5cm verticais, 2cm horizontais
border-width: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left
















18.3. border-color

A propriedade border-color é um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que também podem ser definidas indivi-dualmente através de border-top-color, border-bottom-color, border-right-color e border-left-color.



border-top-color: cor (nome ou código)
border-bottom-color: cor (nome ou código)
border-right-color: cor (nome ou código)
border-left-color: cor (nome ou código)

Exemplos:

border-bottom-color: rgb(231,45,112); border-right-color: 0fa97b;
border-left-color: navy

As propriedades das bordas podem ser tratadas em grupo, com border-color. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindo-se às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:

border-color: border-top-color border-right-color
border-bottom-color border-left-color

Cada um dos border-xxx-color acima é uma cor (RGB, hexadecimal ou nome). Podese alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente.

Exemplos:

border-color: red // red para as quatro bordas
border-color: rgb(255, 0, 0) // red
border-color: rgb(100%, 0, 0) // red
border-color: red 0000ff // red verticais, 0000ff horizontais
border-color: red blue yellow cyan // 4 cores sentido horário



< Anterior   Próximo >