English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A borda do elemento (Border) envolve o preenchimento e o conteúdo.
As propriedades de borda do CSS permitem definir a área da borda da caixa. A borda pode ser um estilo pré-definido, como linha sólida, linha dupla, linha tracejada, etc.também pode ser uma imagemNa próxima seção, será apresentado como definir várias propriedades para definir o estilo da borda (border-style), cor (border-e espessura (border-width).
border-widthA propriedade 'width' especifica a largura da área da borda. É uma abreviação para definir o espessura de todas as quatro laterais da borda do elemento ao mesmo tempo.
p {
border-width: medium 10px thick 15px;
}Teste e Veja‹/›Atenção:se a propriedade 'border'-Se a propriedade 'border' estiver ausente ou não especificada, a borda-width usa o valor padrão (medium).
Oborder-styledefine o estilo da borda do painel, por exemplo: solid, dotted, etc. É uma abreviação para definir o tipo de linha das quatro laterais da borda do elemento.
A propriedade 'border'-A propriedade 'style' pode ser um dos seguintes valores: none, hidden, dashed, dotted, double, groove, inset, outset, ridge e solid.
none: Sem borda.
dotted: Define uma borda pontilhada
dashed: Define uma borda tracejada
solid: Define a borda sólida
double: define duas bordas. A largura das duas bordas é igual à largura de border-O valor width é o mesmo
groove: define3D Borda em sulco. O efeito depende do valor da cor da borda
ridge: define3D Borda ondulada. O efeito depende do valor da cor da borda
inset: define3D Borda encaixada. O efeito depende do valor da cor da borda
outset: define3D Borda de início. O efeito depende do valor da cor da borda
p {
border-style: dotted;
}Teste e Veja‹/›Oborder-colorA propriedade especificacolorBorda do caixa. Isso também é usado para definir a cor da borda de todos os quatro lados do elemento.
p {
border-style: solid;
border-color: #ff0000;
}Teste e Veja‹/›Atenção:border-color Se usado sozinho, essa propriedade não terá efeito. Use border-A propriedade style define primeiro a borda.
Oborder O atributo CSS é um atalho para definir um ou mais atributos de borda separados border-style, border-width e border-color em uma única regra.
p {
border: 5px solid #ff4500;
}Teste e Veja‹/›Se ao definir a propriedade de atalho border ignorar ou não especificar o valor de um único atributo border, será usado o valor padrão da propriedade (se houver).
Atenção:border-colorAo definir a borda do elemento, se falta o valor do atributo ou não for especificado o valor do atributo (por exemplo, border: 5px solid;），a borda do elementocolorA propriedade será usada como valor border-color.
Neste exemplo, a borda será de largura5Borda de linha preta de px:
p {
color: black;
border: 5px solid;
}Teste e Veja‹/›Mas, com border-Na propriedade style, omitir esse valor não exibirá nenhuma borda, porque nessa hora border-O valor padrão da propriedade style é none.
Nos exemplos a seguir, não haverá borda:
p {
border: 5px #00ff00;
}Teste e Veja‹/›