--- title: "Como regular as bordas na sua app GoodBarber" description: "No GoodBarber, cada célula, widget e campo já tem a sua borda de 1 px. Dê-lhe uma cor, uma espessura de 1, 2 ou 4 px, ou um só lado sob um título." canonical_url: "https://pt.goodbarber.com/blog/como-regular-as-bordas-na-minha-app-a1372/" lang: pt date: 2026-10-15 last_updated: 2026-10-16 --- # Como regular as bordas na minha app? Numa app GoodBarber, uma borda espera nas células, nos campos, nos botões e em muitos outros elementos. Dê-lhe uma cor e ela aparece. Pode também regular a sua espessura, do filete discreto à moldura marcada, e manter um só lado sob o título de um widget. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 15 de out. de 2026 · Atualizado em 16 de out. de 2026 · 7 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606134.jpg?v=1792075196.5420387) Eis como funciona a borda numa app GoodBarber, onde está e como regular a sua cor e a sua espessura, até ao filete sob um título. ## O que faz uma borda, em três regulações ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606135.jpg?v=1792075198.4180367) Uma borda é um traço que segue o limite de um elemento. Marca onde ele começa e onde acaba, e revela a sua forma, cantos retos ou arredondados. Uma célula, um campo, um botão, uma pastilha de data, um separador de categoria, a barra de separadores, todos têm uma. Três regulações a descrevem: - **A cor**, transparente por defeito numa célula ou num widget, a escolher na sua paleta ou fora dela. - **A espessura**, um número inteiro, em píxeis. Vale 1 por defeito. - **Os lados**, no cabeçalho de um widget: em cima, à direita, em baixo e à esquerda (top, right, bottom, left), cada um ativo ou desativado. Os quatro ativos emolduram o título. Só o de baixo sublinha-o. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606136.jpg?v=1792075199.5140355) É tudo, e é isso que torna a borda tão simples de regular. No Design System da GoodBarber, é o [átomo Border](https://pt.goodbarber.com/uxdesign/atom-border/), com as suas chaves color e size e, para um cabeçalho, uma chave por lado. ## A borda já está nas suas células, nos seus campos e nos seus botões ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606137.jpg?v=1792075200.914034) Numa app GoodBarber, não adiciona uma borda, revela-a. As células, os widgets da Home e os seus cabeçalhos têm uma, de 1 px, transparente. Dê-lhe uma cor e ela aparece. Os campos e os botões também têm uma, e a deles já se vê, cinza-claro num campo, na cor do texto num botão de contorno. É o nosso princípio «Design by system», cada elemento é construído com a sua borda, pronta a servir. Num widget da Home, a cor escolhe-se no painel de design, pelo caminho **Minha App › Estrutura › Home › o seu widget › Editar**. Encontra aí três cores, **«Bordas»** para o cabeçalho, **«Cor de contorno»** para a moldura do widget inteiro e **«Cor da borda»** para cada célula. A espessura, essa, regula-se no JSON, já lá vamos. Para os campos, uma só regulação chega para toda a app. Vive em Estilo da App, com o botão { EDIÇÃO } de que falamos mais abaixo, sob designComponents, textField e depois border. ## Numa lista, borda ou separador, nunca os dois ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606138.jpg?v=1792075203.2060313) Uma lista tem uma regra a mais. Quando as suas células não têm fundo nem borda, seguem-se diretamente na página e um filete fino separa-as, o separador, na cor **«Separador de lista»** das suas Cores. Dê uma cor às células, ao fundo ou à borda, e a lista muda de modo. O separador apaga-se sozinho. Cada célula destaca-se das vizinhas e os seus cantos aparecem, conforme a sua regulação de forma. Nada a desativar, nada a alinhar. Assim, numa app GoodBarber, uma lista nunca acumula dois traços, o filete entre as linhas ou o traço à volta de cada célula, e é o sistema que escolhe. É o nosso princípio «No design burden», para que o design nunca seja um fardo. ## Regule a sua borda no GoodBarber [Animation (lien du player à ajouter après export et dépôt sur Vimeo) : l'éditeur Édition avancée ouvert sur list › cell › border d'une liste Unit 7 ; color passe à #282727 puis size à 2 (valeurs en bleu, « 2 unsaved changes »), Save, le bandeau « Modifications saved », et dans l'app les séparateurs s'effacent, chaque cellule prend son trait de 2 px et l'écart passe de 32 à 16 px (geste refait sur mapiemap le 14/10 ; le second temps sur les côtés d'une cellule est retiré le 15/10, le natif ne les rend pas)](https://player.vimeo.com/video/1236239005?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Para regular a borda por si mesmo, a extensão **Edição avançada** abre o JSON, a lista completa das regulações, a mesma que para [a sombra](https://pt.goodbarber.com/blog/como-regular-a-sombra-na-minha-app-a1363/). Aí regula a espessura de qualquer borda, os lados do cabeçalho de um widget e a sua cor onde o painel não a propõe, como a lista de uma secção, com as mesmas chaves para uma célula, um cabeçalho ou um widget. Gratuita, a extensão instala-se a partir do menu **«Loja de Extensões»**, na ficha «Edição avançada». Os seus ecrãs de design ganham então o botão { EDIÇÃO }, no canto superior direito. 1. **Abra o JSON.** No painel de design da sua secção (**Minha App › Estrutura › a sua secção › Editar o design**) ou do seu widget, clique em { EDIÇÃO }. Abra list, cell e depois border para a lista de uma secção, cell e depois border para as células de um widget, ou header e depois border para o seu cabeçalho. As chaves estão por ordem alfabética. 2. **Escolha a cor.** Clique no valor de **color** e introduza o seu código hexadecimal (#282727 aqui). Já escolhida no painel do seu widget? Passe ao passo seguinte. 3. **Regule a espessura.** Clique no valor de **size**, escreva um número inteiro (2 aqui) e guarde. A borda aparece. Uma lista em modo separador passa a modo célula assim que a sua borda tem uma cor. 4. **Sublinhe o título de um widget.** No JSON do seu widget, abra header e depois border. Sob border, clique em «+ Adicionar», escreva **top** no campo newKey, deixe «Valor» selecionado, introduza 0 (0 desativa o lado) e depois «Adicionar». Faça o mesmo para **left** e **right**, e guarde. Só o lado de baixo mantém o seu traço, sob o título. Duas coisas a reter. A espessura continua a ser um número inteiro, 2.7 torna-se 2. E a borda desenha-se no interior da célula. A 4 px, retira 4 px de cada lado ao espaço do conteúdo. Verifique as suas células mais cheias na pré-visualização. ## Antes, depois: a espessura das bordas cria a hierarquia ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606140.jpg?v=1792075205.5700288) Eis duas vezes o mesmo ecrã. À esquerda, todas as bordas estão a 1 px, num cinzento discreto. Delimitam cada elemento, mas nada sobressai, tudo vale o mesmo. À direita, passam ao preto suave da paleta (#282727) e a sua espessura segue o papel de cada elemento. 1 px para a barra de navegação e a célula de evento, 2 px para os cabeçalhos dos widgets e a pastilha da data, 4 px para a única notícia em destaque. Uma sombra dura sob a pastilha acaba de dar ao ecrã o seu ar de cartaz. O olhar sabe logo para onde ir. As espessuras mudam-se num instante. Experimente, compare na pré-visualização e fique com o que o seu olhar preferir. ## Borda fina ou grossa, que efeito na sua app? ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606141.jpg?v=1792075207.378027) A mesma célula pode ter bordas muito diferentes, e cada uma muda o estilo da sua app. A imagem mostra quatro, da mais discreta à mais marcada: | Borda | color | size | O efeito | | ------------------ | ----------- | ---- | -------------------------------------------------------------- | | 1. Por defeito | transparent | 1 | A célula funde-se com a página, o conteúdo fala sozinho | | 2. Fina e cinzenta | #A7A7A7 | 1 | Um limite discreto, ideal quando as suas células não têm fundo | | 3. Nítida | #282727 | 2 | Um contorno franco, cada célula destaca-se nitidamente | | 4. Grossa | #282727 | 4 | Uma moldura gráfica, para uma app de estilo marcado | A primeira linha corresponde à regulação por defeito, a que obtém sem escrever nada. As outras três copiam-se tal e qual no editor, chave a chave. Nenhuma destas bordas é melhor do que outra, e todas se regulam com as mesmas chaves. A mais grossa, por si só, pode dar o seu estilo a uma app, como na nossa [maquete de app de galeria de arte](https://dribbble.com/shots/27619835), em neobrutalismo, no Dribbble, com bordas pretas grossas e cantos retos. ## Uma borda sob o título, para separar sem fechar ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98391777-68606142.jpg?v=1792075209.2660248) A minha regulação preferida cabe num traço, um filete de 1 px sob o título de um widget, na cor dos filetes da paleta. Já se cruzou com ele nas imagens deste artigo. Como num jornal, separa o título do conteúdo sem fechar nada, e a lista respira. Uma moldura completa à volta do título faria dele um botão. A sua cor escolhe-se no painel do widget, em «Bordas», e os seus lados em { EDIÇÃO }, é o gesto do passo 4 acima. **A borda em resumo** - Numa app GoodBarber, a borda já lá está, 1 px, nas células, nos widgets e nos seus cabeçalhos, nos campos e nos botões, transparente exceto nos campos e nos botões de contorno. - Três regulações, a cor, a espessura (um número inteiro em píxeis) e, no cabeçalho de um widget, os lados (top, right, bottom, left), cada um ativo ou desativado. - Borda ou separador, nunca os dois. Uma cor de fundo ou de borda na célula apaga o separador e destaca-a. - Num widget da Home, três cores no painel, o cabeçalho, o widget, a célula. - Para os campos, uma só regulação vale para toda a app. - A espessura e os lados regulam-se no JSON, com a extensão gratuita Edição avançada (botão { EDIÇÃO }). ## É a sua vez O passo seguinte é simples. Abra o painel de design de um widget da sua Home e dê uma cor a «Cor da borda». Quando lhe apetecer um traço mais marcado, o botão { EDIÇÃO } está no mesmo sítio, e uma só chave, size, chega para começar. Ainda não tem app? [Crie a sua](https://pt.goodbarber.com/create/) com a GoodBarber, o Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre o autor Marie-Pierre Jeffard UI Designer Sou UI Designer da GoodBarber. Design system das apps, componentes, layouts, site, ilustrações, animações: tudo o que faço gira em torno da interface. O que me agrada no nosso produto é inventar regras universais, que funcionam em todos os ecrãs e acolhem todas as identidades visuais. A app torna-se uma montra para o seu conteúdo. Gosto do que parece simples, e de todo o trabalho invisível necessário para lá chegar: as regras, as escolhas e as restrições que mantêm uma interface de pé. É isso que conto aqui. [Mais de Marie-Pierre](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)