{"id":752,"date":"2024-04-24T21:18:37","date_gmt":"2024-04-25T00:18:37","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=752"},"modified":"2025-11-07T16:09:35","modified_gmt":"2025-11-07T19:09:35","slug":"bordas-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/","title":{"rendered":"Bordas no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 3<\/span> minutos<\/span><\/span>\n

Bordas no CSS<\/strong>: As Bordas<\/strong> s\u00e3o a linha de demarca\u00e7\u00e3o do Box Model, separando o padding<\/code> e o content<\/code> da margin<\/code> externa. Elas s\u00e3o essenciais para estruturar o layout, guiar o olhar do usu\u00e1rio e adicionar detalhes est\u00e9ticos.<\/p>\n\n\n\n

O CSS oferece um controle completo sobre a largura, o estilo, a cor e a forma (arredondamento) de cada borda.<\/p>\n\n\n\n

Neste artigo, exploraremos as principais propriedades de bordas no CSS e a propriedade border-radius<\/code><\/strong> para criar cantos arredondados e formas sofisticadas.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. A Propriedade border<\/code> (Shorthand)<\/h2>\n\n\n\n

A maneira mais eficiente de definir uma borda uniforme nos quatro lados \u00e9 usando a propriedade border<\/code><\/strong> (shorthand), que combina as tr\u00eas subpropriedades essenciais:<\/p>\n\n\n\n

Sintaxe:<\/strong><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

border: [width] [style] [color];\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Propriedades Essenciais<\/h3>\n\n\n\n
Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Valores Comuns<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
border-width<\/code><\/strong><\/td>Espessura da borda.<\/td>1px<\/code>, medium<\/code>, thick<\/code><\/td>1px<\/code> (use unidades absolutas ou relativas).<\/td><\/tr>
border-style<\/code><\/strong><\/td>Apar\u00eancia da linha.<\/td>solid<\/code>, dashed<\/code>, dotted<\/code>, double<\/code><\/td>solid<\/code><\/strong> \u00e9 o mais comum.<\/td><\/tr>
border-color<\/code><\/strong><\/td>Cor da borda.<\/td>black<\/code>, #f00<\/code>, var(--cor-primaria)<\/code><\/td>Use qualquer formato de cor CSS.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Exemplo Shorthand:<\/strong><\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
.card {\n  \/* Borda de 2 pixels, s\u00f3lida, na cor preta, em todos os lados *\/\n  border: 2px solid black;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Personalizando Lados Individuais<\/h2>\n\n\n\n
Voc\u00ea pode aplicar estilos diferentes a cada lado, usando propriedades espec\u00edficas ou definindo a shorthand<\/em> por lado (border-top<\/code>, border-right<\/code>, etc.).<\/p>\n\n\n\n
<\/div>\n\n\n\n
Declara\u00e7\u00e3o Por Lado<\/h3>\n\n\n\n
Propriedade<\/strong><\/td>Exemplo<\/strong><\/td>Descri\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
border-top<\/code><\/strong><\/td>border-top: 4px dashed blue;<\/code><\/td>Define todas as tr\u00eas propriedades apenas para o lado superior.<\/td><\/tr>
**border-color**<\/code><\/td>border-color: red blue;<\/code><\/td>Dois valores:<\/strong> Topo\/Baixo \u00e9 red<\/code>, Direita\/Esquerda \u00e9 blue<\/code>.<\/td><\/tr>
border-style<\/code><\/strong><\/td>border-style: solid none;<\/code><\/td>Borda s\u00f3lida em Topo\/Baixo e nenhuma borda em Direita\/Esquerda.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\ud83d\udca1 Efeito 3D com groove<\/code>, ridge<\/code>, inset<\/code>, outset<\/code><\/h3>\n\n\n\n
Esses estilos criam a ilus\u00e3o de profundidade ao dependerem de duas cores de borda (mais claras e mais escuras), simulando um efeito de relevo.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
.botao-relevo {\n  border: 10px outset gray; \/* Cria a ilus\u00e3o de um bot\u00e3o pressionado *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. Bordas Arredondadas com border-radius<\/code><\/h2>\n\n\n\n
A propriedade border-radius<\/code> \u00e9 essencial para suavizar as bordas de elementos e \u00e9 amplamente utilizada para cards<\/em>, bot\u00f5es e avatares.<\/p>\n\n\n\n
Sintaxe<\/strong><\/td>Valores<\/strong><\/td>Efeito<\/strong><\/td><\/tr><\/thead>
1 Valor<\/strong><\/td>10px<\/code><\/td>Todos os quatro cantos t\u00eam o mesmo arredondamento.<\/td><\/tr>
4 Valores<\/strong><\/td>10px 5px 0 20px<\/code><\/td>Arredondamento em ordem: Topo-Esq, Topo-Dir, Baixo-Dir, Baixo-Esq (sentido hor\u00e1rio).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\ud83c\udfaf Criando C\u00edrculos<\/h3>\n\n\n\n
Para transformar um elemento em um c\u00edrculo (como um avatar), use border-radius: 50%<\/code> e garanta que o elemento tenha a mesma width<\/code> e height<\/code>.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
.avatar {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%; \/* Transforma o quadrado em c\u00edrculo *\/\n  overflow: hidden; \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
4. Diferen\u00e7a Crucial: border<\/code> vs. outline<\/code><\/h2>\n\n\n\n
Embora outline<\/code> tamb\u00e9m desenhe uma linha ao redor do elemento, seu comportamento \u00e9 fundamentalmente diferente da border<\/code>:<\/p>\n\n\n\n
Recurso<\/strong><\/td>border<\/strong><\/td>outline<\/strong><\/td><\/tr><\/thead>
Box Model<\/strong><\/td>Ocupa espa\u00e7o (aumenta o tamanho do elemento).<\/td>N\u00c3O<\/strong> ocupa espa\u00e7o (n\u00e3o afeta o layout).<\/td><\/tr>
Cantos<\/strong><\/td>Pode usar border-radius<\/code>.<\/td>N\u00e3o pode ser arredondado.<\/td><\/tr>
Uso Principal<\/strong><\/td>Design, separa\u00e7\u00e3o de elementos.<\/td>Acessibilidade<\/strong> (especialmente no estado :focus<\/code>).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
Melhor Pr\u00e1tica:<\/strong> Use outline<\/code> em vez de border<\/code> no estado :focus<\/code> para fornecer um indicador visual claro sem causar saltos inesperados no layout da p\u00e1gina.<\/p>\n<\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* Torna o outline vis\u00edvel quando o elemento est\u00e1 em foco, sem mudar o layout *\/\nbutton:focus {\n  outline: 2px solid blue;\n  outline-offset: 2px; \/* Adiciona um pequeno espa\u00e7o entre a borda e o contorno *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u2705 Conclus\u00e3o Bordas no CSS<\/h2>\n\n\n\n
As bordas s\u00e3o o primeiro passo para adicionar detalhes est\u00e9ticos e estruturais aos seus elementos. Ao dominar a shorthand<\/em> border<\/code>, o uso criativo dos estilos e a manipula\u00e7\u00e3o de border-radius<\/code>, voc\u00ea pode transformar caixas simples em componentes visualmente ricos. Lembre-se de usar outline<\/code> para acessibilidade e border<\/code> para design.<\/p>\n\n\n\n
Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n
\n
\n
\"HTML\"<\/a>
HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"CSS\"<\/a>
CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Javascript\"<\/a>
JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n
\n
\n
\"Hospedagem<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Ofertas<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Amazon<\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Tempo de leitura: <\/span>  3<\/span> minutos<\/span><\/span>Bordas no CSS: As Bordas s\u00e3o a linha de demarca\u00e7\u00e3o do Box Model, separando o…<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"\nBordas no CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Bordas no CSS: Neste artigo, exploraremos em detalhes as propriedades de bordas no CSS e como utiliz\u00e1-las para criar efeitos visuais ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bordas no CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Bordas no CSS: Neste artigo, exploraremos em detalhes as propriedades de bordas no CSS e como utiliz\u00e1-las para criar efeitos visuais ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-25T00:18:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T19:09:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Bordas no CSS\",\"datePublished\":\"2024-04-25T00:18:37+00:00\",\"dateModified\":\"2025-11-07T19:09:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/\"},\"wordCount\":498,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/\",\"name\":\"Bordas no CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-25T00:18:37+00:00\",\"dateModified\":\"2025-11-07T19:09:35+00:00\",\"description\":\"Bordas no CSS: Neste artigo, exploraremos em detalhes as propriedades de bordas no CSS e como utiliz\u00e1-las para criar efeitos visuais ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/bordas-no-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bordas no CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bordas no CSS - BLOG THIAGO ROSSI","description":"Bordas no CSS: Neste artigo, exploraremos em detalhes as propriedades de bordas no CSS e como utiliz\u00e1-las para criar efeitos visuais ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Bordas no CSS - BLOG THIAGO ROSSI","og_description":"Bordas no CSS: Neste artigo, exploraremos em detalhes as propriedades de bordas no CSS e como utiliz\u00e1-las para criar efeitos visuais ...","og_url":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-25T00:18:37+00:00","article_modified_time":"2025-11-07T19:09:35+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Bordas no CSS","datePublished":"2024-04-25T00:18:37+00:00","dateModified":"2025-11-07T19:09:35+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/"},"wordCount":498,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/","name":"Bordas no CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-25T00:18:37+00:00","dateModified":"2025-11-07T19:09:35+00:00","description":"Bordas no CSS: Neste artigo, exploraremos em detalhes as propriedades de bordas no CSS e como utiliz\u00e1-las para criar efeitos visuais ...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/bordas-no-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Bordas no CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":4429,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/752\/revisions\/4429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}