O CSS trouxe muitos benef\u00edcios\u00a0para o uso de elementos gr\u00e1ficos no webdesign, tornando a administra\u00e7\u00e3o do layout muito mais simples atrav\u00e9s da folha de estilos. O uso do CSS para a estiliza\u00e7\u00e3o de bordas\u00a0permite o emprego de uma grande variedade de estilos e outros elementos. Confira nesse tutorial algumas configura\u00e7\u00f5es b\u00e1sicas para a estiliza\u00e7\u00e3o de bordas que podem ajudar na cria\u00e7\u00e3o de seus projetos!<\/p>\n
Para come\u00e7ar, h\u00e1 tr\u00eas configura\u00e7\u00f5es principais que voc\u00ea pode mudar em bordas:<\/strong> Por exemplo, o c\u00f3digo abaixo ir\u00e1 aplicar uma borda de 1px para um elemento: Podemos modificar essa sintaxe um pouco: Como visto neste exemplo, al\u00e9m da passibilidade de passar um valor espec\u00edfico (no caso de 1px) para border-width, \u00e9 tamb\u00e9m poss\u00edvel trocar o valor por uma das tr\u00eas palavras-chave que expressam a largura da borda: thin (fina), medium (m\u00e9dia), e thick (grossa):<\/p>\n Estes atributos determinam como as bordas ser\u00e3o apresentadas:<\/p>\n Color<\/strong> Style<\/strong> Width<\/strong> Exemplo de uso no c\u00f3digo:<\/strong><\/p>\n Lembre-se: os estilos n\u00e3o aparecer\u00e3o id\u00eanticos em todos os navegadores. Escreva seu CSS para os navegadores mais modernos, fornecendo alternativas no c\u00f3digo para navegadores menos utilizados, como o Internet Explorer 5.0.<\/p>\n","protected":false},"excerpt":{"rendered":" O CSS trouxe muitos benef\u00edcios\u00a0para o uso de elementos gr\u00e1ficos no webdesign, tornando a administra\u00e7\u00e3o do layout muito mais simples atrav\u00e9s da folha de estilos. O uso do CSS para a estiliza\u00e7\u00e3o de bordas\u00a0permite o emprego de uma grande variedade de estilos e outros elementos. Confira nesse tutorial algumas configura\u00e7\u00f5es b\u00e1sicas para a estiliza\u00e7\u00e3o de […]<\/p>\n","protected":false},"author":253,"featured_media":9016,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[156],"tags":[1368],"class_list":["post-9012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-css"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/253"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=9012"}],"version-history":[{"count":2,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9012\/revisions"}],"predecessor-version":[{"id":42804,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/9012\/revisions\/42804"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/9016"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=9012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=9012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=9012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nborder-width
\nborder-color
\nborder-style<\/p>\n
\nborder: 1px solid black;<\/p>\n
\nborder-width: thick;
\nborder-color: black;
\nborder-style: solid;<\/p>\nEstilos de borda com CSS<\/h3>\n
\nAs cores podem ser expressadas utilizando:
\nc\u00f3digo hexadecimal, exemplo: #000000
\nc\u00f3digo rgb, exemplo: rgb (0,0,0)
\nnome da cor em ingl\u00eas, exemplo: black<\/p>\n
\nA seguir, alguns estilos de borda que podem ser expressados atrav\u00e9s das seguintes vari\u00e1veis:
\nPara n\u00e3o utilizar bordas: “none” ou “hidden”
\nPara ter uma borda pontilhada – border-style: dotted;
\nBorda tracejada – border-style: dashed;
\nBorda com caneleta – border-style: groove;
\nBorda cont\u00ednua – border-style: solid;
\nBorda dupla – border-style: double;
\nBorda em ressalto – border-style: ridge;
\nBorda em baixo relevo – border-style: inset;
\nBorda em alto relevo – border-style: outset;<\/p>\n
\nComo j\u00e1 demonstramos, al\u00e9m de um valor espec\u00edfico \u00e9 poss\u00edvel utilizar o seguinte para expressar a largura das bordas:
\nBorda fina: “thin”
\nBorda m\u00e9dia: “medium”
\nBorda grossa: “thick”
\nPara definir um comprimento: “length” seguido de um valor em uma medida reconhecida pelo padr\u00e3o CSS, por exemplo px, pt ou cm.<\/p>\n<html>\n<head>\n<style type=\"text\/css\">\np.solid {border-style: solid}\n<\/style>\n<\/head><\/pre>\n<body>\n<p class=\"solid\">\nUma borda s\u00f3lida<\/p>\n<\/body>\n<\/html><\/pre>\n