Bordas são usadas em páginas HTML para demarcar e destacar o conteúdo. Quando há muitas informações em uma página e você deseja chamar a atenção do usuário para partes específicas, use bordas ao redor desse conteúdo. Neste artigo sobre Borders em CSS, discutirei os seguintes tópicos:
- Quando usar Fronteiras
- Fronteiras em CSS
- Atributos de CSS Border
- Valores padrão para Atributos de Borda
- Definir fronteiras em taquigrafia
- Pontos a ter em mente ao projetar bordas em CSS
Quando usar Fronteiras
A prática padrão é usar tags de borda CSS para definir bordas em páginas HTML para:
- Em torno de títulos importantes
- Para destacar postscript ou notas importantes
- Para anexar fotos, ilustrações, citações de pessoas, vídeos
- Para chamar a atenção para preços, prazos ou informações significativas
Você pode querer ler sobre o antes de começar a aprender sobre as fronteiras CSS.
Para um tutorial de CSS abrangente, visite Tutorial Edureka CSS para iniciantes . Você receberá um excelente aviso sobre como o CSS deve ser usado para aprimorar o design da web em HTML.
Fronteiras em CSS
Bordas CSS podem ser atribuídas a diferentes seções da página HTML, seja para incluir títulos ou parágrafos. Vamos começar com um exemplo. Aqui definimos uma borda ao redor do título e outra borda ao redor do texto do parágrafo.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Borda em torno do parágrafo também!
funções e responsabilidades do desenvolvedor hadoop
Atributos de CSS Border
Bordas CSS têm 3 atributos principais para seus
- estilo:oestiloatributo define o padrão da borda.
- cor: A cor pode ser qualquer uma do conjunto definido pelas cores CSS.
- largura: A largura é usada para variar a espessura da borda, para torná-la mais proeminente.
No exemplo acima, vimos que apenas um atributo de borda é definido, ou seja, seu estilo. Os outros atributos, quando não definidos, assumem os valores padrão. Existe outro atributo chamado raio, que é usado com menos frequência. Ele é usado para tornar as bordas da borda arredondadas.
- estilo de borda atributo
| Estilo | Descrição |
| border-style: sólido | |
| border-style: double | |
| border-style: groove | |
| border-style: cume | |
| border-style: inset | |
| border-style: início | |
| border-style: nenhum | |
| border-style: oculto | |
| border-style: dotted | |
| border-style: tracejado |
Você notaria que há uma opção 'sem borda' e 'borda oculta' também. Um desenvolvedor pode simplesmente evitar definir uma fronteira, por que defini-la explicitamente como uma 'fronteira oculta'? Isso é feito para fins de uso de espaço e alinhamento com outros elementos da página.
Os estilos de borda também podem ser misturados dentro de um elemento. Para este propósito, os 4 lados da borda individuais podem ser definidos separadamente com estilos diferentes. Isso pode ser feito de 2 maneiras. Defina todos os 4 lados em uma única tag. Nesse caso, a contagem começa na linha superior e depois se move no sentido horário. Alternativamente, cada um dos 4 limites também pode ser definido em tags individuais. Ambos os casos são mostrados no próximo exemplo.
| Estilo | Descrição |
| border-style: pontilhada tracejada dupla sólida border-top-style: pontilhado border-right-style: tracejado border-bottom-style: sólido border-left-style: double |
- Cor da borda atributo
O atributo de cor para uma borda pode ser definido de várias maneiras. Isso é semelhante a definir cores para outros elementos. As cores podem ser definidas por um dos seguintes métodos:
- nome - especifique um nome de cor, como “azul”. Você também pode experimentar algumas opções de cores extravagantes, como “BlanchedAlmond”!
- Hex - especifique um valor hexadecimal, como “# ff0000”
- RGB - defina o código RGB. Por exemplo, rgb (255,255,0) significa amarelo.
- configuração - como “transparente” ou “opaco”
- largura da borda atributo:
A propriedade de largura, como o nome sugere, define a espessura dos 4 lados da borda. Se um valor for definido, é para todos os lados, caso contrário, os valores de largura individuais também podem ser definidos.
A largura pode ser especificada em qualquer uma das unidades padrão, como pixels (‘px’), pontos (‘pt’) ou em centímetros (‘cm’). Você também pode especificar a largura usando valores predefinidos de 'espessura', 'fina' e 'média'.
| Estilo | Descrição |
| border-width: 10px | |
| largura da borda: 0,1 cm | |
| border-width: medium |
- raio de fronteira atributo
O objetivo de definir o raio é obter cantos arredondados para a borda. O fator de raio define a extensão do arredondamento. Quanto maior o valor, mais curvos se tornam os cantos. Como prática padrão, os valores do raio são mantidos entre 1-3 vezes a largura da borda.
O seguinte código irá gerar:
border-width: 10px
border-radius: 30px
Valores padrão para atributos de borda
O único atributo obrigatório é o estilo . Se o estilo estiver faltando, a borda não aparecerá.
Se a cor não for especificada, a cor do elemento subjacente será considerada o valor padrão. Por exemplo, se a cor do texto de um parágrafo for definida como 'azul', a cor padrão da borda também será azul. Caso não haja definição de cor nem mesmo para o elemento, a cor padrão é ‘preto’.
O valor padrão para largura é ‘médio’.
Definir fronteiras em taquigrafia
Alguns desenvolvedores preferem definir atributos de borda em uma tag concisa de uma linha. Esse formato abreviado ajuda a minimizar as linhas de código e os desenvolvedores especialistas preferem esse formato. Usar o formato abreviado é recomendado quando a definição da borda é simples e bastante padronizada. No entanto, se você precisar destacar cada lado da borda em um estilo diferente, precisará seguir o formato de definição de tags individuais.
O seguinte código é usado:
border-style: tracejado
border-color: verde
largura da borda: 5px
borda: verde tracejada 5px
Pontos a ter em mente ao projetar bordas em CSS
Não use muitas bordas em uma página, pode ser uma distração e dificultar o foco do usuário.
É importante manter a consistência no estilo e nas cores das bordas. Os elementos no mesmo nível de hierarquia em uma página devem ter estilo de borda e largura semelhantes para uniformidade. Por exemplo, se parágrafo é definido com borda sólida e largura de 5 px, mantenha este formato em todas as outras parágrafo elementos durante o design do site.
Atenha-se a um estilo de definição de tag. Alguns desenvolvedores se sentem confortáveis com as definições de atalho com todos os valores atribuídos a um único fronteira tag. Alguns outros preferem a listagem explícita de todas as tags por largura, cor e estilo. A convenção é que quando decorações elaboradas de borda são exigidas em uma página, as marcas individuais são listadas separadamente. Isso ajuda durante a depuração de tais definições de borda personalizadas. Para casos normais, basta uma definição de atalho.
Espero que você tenha encontrado as informações que procurava nas bordas do CSS e wCom isso, chegamos ao fim deste artigo Borders in CSS.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Border in CSS” e entraremos em contato com você.