nessa aula nós vamos aprender a trabalhar com bordas a propriedade border é bem simples a gente usa bastante essa propriedade para enfeitar o nosso código muitas vezes ao fazer botões ao a gente poder ah tá trabalhando de forma mais estilizada então a gente vai ver como funciona a questão das bordas agora certo pessoal então no nosso título um aqui ó meu primeiro site com CS eu posso colocar aqui uma propriedade chamada border e dentro de border eu posso especificar algumas coisas primeiro é o tamanho dessa borda em pixels Então a gente vai colocar um pixel
pra gente fazer o tamanho dessa borda a gente vai dar um espaço e aqui o tipo da borda que a gente vai querer o estilo existem vários estilos de borda que a gente pode fazer eu vou mostrar para você todos os principais que a gente trabalha certo principal seria o Solid que seria uma borda sólida então eu tô passando que eu quero uma borda de um pixels sólida e aqui eu vou passar Qual é a cor que eu quero dessa borda e vou colocar black que eu quero escura ponto e vírgula se eu der um
salvar Olha o que que vai acontecer lá no nosso H1 né no nosso título um aqui ó percebeu ele colocou uma borda em volta de todo o elemento ok a gente também poderia mudar aqui é pras variações de borda que a gente tem essa é a primeira é a sólida a gente tem também o dotted que é assim que seria com pontinhos não sei se vocês vão conseguir enxergar bem aqui mas são pontinhos a gente tem também o desad que é com tracinhos assim ó a gente tem a dupla que é duble borda dupla ele
fica com duas bordas duas bordinhas a gente tem a Grove que é para ser um efeito mais 3D aqui olhando vocês não vão conseguir enxergar teria que ser um pouco mais grossa eu acho ó deixa eu colocar assim um pouco mais grossa deixa eu ver se Double vai aparecer aqui para vocês verem ó assim fica melhor de ver né a dupla aí aqui a gente tem a Grove que é para ser um efeito 3D mas não sei se tem que ser bem mais grossa para poder enxergar é não vai dar para enxergar dessa maneira a
gente tem a rid assim rid a gente tem também a inset que é por dentro deixa eu deixar cinco assim por dentro a gente tem a outset que é por fora a gente tem a NN que é nenhuma e tem a hidden a hidden que é oculta também não aparece certo pessoal mas as que a gente mais trabalha vai ser a Solid Solid que é assim e a dotted que é os pontinhos e a dashed que é os tracinhos certo pessoal Esses são os que a gente mais trabalha da aqui na cor a gente pode
passar a cor que a gente quiser né pessoal a gente pode passar aqui vou colocar aqui a vermelho ó vai ficar assim legal então dessa forma a gente pode fazer bordas e existe a questão da onde você quer que essa borda ela apareça deixa eu colocar aqui sólida assim quando coloco só border passo o tamanho da borda o tipo dela e a cor Vai ficar em toda a área eu tô dizendo que eu tô querendo uma borda em todo o sentido mas se eu passar o lado específico ele vai mostrar só naquele lado que eu
apontar por exemplo se eu colocar border left quer dizer borda à esquerda Olha o que que vai acontecer ficou vermelho né então vou fazer assim ó minha borda à esquerda vou deixar vermelha a minha borda no topo minha borda eu vou mudar a cor aqui ó vou fazer verde Olha lá a minha borda à direita deixa eu ajeitar aqui border Vamos colocar aqui à direita que é right vamos trocar a cor aqui vamos dizer que é um azul salvei e a minha borda a embaixo seria border Bottom assim ó com 2 t e m no
final eu vou colocar a cor aqui ah um laranjado aqui tá pessoal Deixa eu ver se eu acho aqui aqui um laranjado cont control S beleza dessa forma pessoal a gente pode controlar os lados das bordas e cada uma de forma individual então a borda em cima a borda na esquerda a borda na direita e a borda embaixo cada um pode ter uma cor pode ser de um tipo diferente a gente tá trabalhando de forma isolada com cada uma delas certo pessoal isso então é bem tranquilo você pode fazer vários efeitos legais aí Conforme você
quiser né e a gente usa também a questão da borda redondada né pessoal para isso eu vou fazer o seguinte ó eu vou nessa aqui mesmo eu vou apagar tudo isso daqui e vou deixar uma borda comum ó border um PX Solid normal e eu quero deixar essa bordinha arredondada como é que eu faço é bem fácil você vai colocar a propriedade border traço radios assim ó borda arredondada e aqui você pode passar uma porcentagem ou então um valor fixo em pixels então eu posso botar assim ó 5% ponto e vírgula se eu der um
salvar Ó lá ele já deu uma leve arredondada mas o mais legal é colocar em pixels por exemplo 10 pixels assim ó aí vai ficar bem redondinho aqui os cantinhos você pode ir ajustando conforme você quer o nível de arredondado ó 20 pixels Ó ficou bem arredondo aí ele já vai fazer o arredondamento aqui da nossa borda certo para ficar bonitinho isso aqui eu vou usar uma outra propriedade que a gente ainda não viu mas é o tex Aline Center alinhar o texto ao centro Para ficar lá direitinho a nossa bordinha olha só que legal
show de bola né pessoal bem interessante e até poderia usar já um background aqui ó background Black pro fundo ficar escuro já que a gente aprendeu sobre o o background ó lá meu primeiro site com CSS E aí a gente pode colocar aqui na no color né em vez desse azul a gente poderia colocar um branco aqui ó salvar ó lá meu primeiro site com CSS legal então isso daí é a propriedade border a gente coloca Primeiro qual o tamanho dessa borda qual vai ser o tipo dela a gente mostrou aqui os principais Qual é
a cor e se você quiser fazer borda arredondada você coloca border radios e o valor que você quer para que ela fique com arredondado na forma como você achar melhor beleza próxima aula vamos ver mais uma propriedade aqui CSS forte abraço e até a próxima aula Espero que você tenha gostado dessa aula que tenha te ajudado se você quiser continuar assistindo o curso pode continuar clicando num desses cards que estão aparecendo aqui deixa o seu gostei se inscreve no canal para não perder nenhum conteúdo sobre programação web e a gente se vê no próximo vídeo
valeu
