Meta tags:
description=Como usar border-width e border-color em CSS, valores de border-style como dotted, dashed, solid, double, groove, ridge, inset e outset. Veja exemplos.;

Headings (most frequently used words):

border, propriedade, exemplo, da, css, width, color, para, lados, individuais, abreviada, bordas, style, como, arredondadas, diferença, entre, outlines, capítulos, relacionados, prática, resultado, das, propriedades, radius,

Text of the page (most frequently used words):
border (181), style (65), width (56), css (49), color (48), borda (27), html (25), #propriedade (24), solid (23), uma (22), text (22), font (21), example (20), with (20), pode (18), grid (18), class (17), bordas (16), top (16), left (16), para (15), aprender (15), background (14), dotted (14), radius (13), você (13), exemplo (13), column (13), todos (12), body (12), head (12), como (11), lados (11), que (11), outline (11), por (11), padding (10), são (10), elemento (10), bottom (10), right (10), break (10), não (9), cor (9), quatro (9), image (9), animation (9), das (8), linha (8), offset (8), property (8), blue (8), double (8), valores (8), valor (8), position (8), stroke (8), propriedades (7), ser (7), cada (7), ter (7), largura (7), mesmo (7), round (7), define (7), superior (7), inferior (7), dashed (7), overflow (7), decoration (7), flex (7), abreviada (6), page (6), estilo (6), experimente (6), copiar (6), doctype (6), groove (6), align (6), margin (6), type (6), variant (6), w3docs (5), lado (5), com (5), caixa (5), the (5), outset (5), transition (5), line (5), last (5), child (5), formatter (5), generator (4), prática (4), entre (4), individuais (4), seguintes (4), layout (4), página (4), three (4), two (4), one (4), shorthand (4), red (4), onde (4), direita (4), esquerda (4), 3px (4), inset (4), ridge (4), três (4), rgb (4), thick (4), mode (4), transform (4), fill (4), size (4), height (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), sobre (3), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), outlines (3), arredondadas (3), podem (3), espaço (3), defina (3), sem (3), portanto (3), faz (3), ela (3), redor (3), los (3), normal (3), for (3), and (3), all (3), green (3), sólidas (3), use (3), tem (3), direito (3), esquerdo (3), yellow (3), usar (3), especifica (3), medium (3), thin (3), title (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), content (3), columns (3), auto (3), direction (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), capítulos (2), relacionados (2), diferença (2), this (2), tabelas (2), quais (2), usadas (2), estilizar (2), dentro (2), cores (2), espessura (2), eles (2), botões (2), links (2), deslocar (2), restante (2), focus (2), igual (2), ocupa (2), tamanho (2), fora (2), fica (2), margem (2), adicionar (2), elementos (2), isso (2), dcdcdc (2), pontilhada (2), dupla (2), fundo (2), parecer (2), toda (2), parece (2), efeito (2), mais (2), série (2), veja (2), seu (2), padrão (2), none (2), única (2), definir (2), primeiro (2), hex (2), nome (2), definida (2), também (2), definem (2), sempre (2), palavras (2), chave (2), navegador (2), 1c87c9 (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, logo, alternativa, impacta, arredonde, cantos, estilos, detalhes, controle, afetam, comumente, usados, estado, anel, foco, aparecer, deslocado, deslocadas, diferentes, nos, desenhado, nunca, altera, posição, seus, vizinhos, parte, modelo, dos, ambos, desenham, fácil, confundi, principais, diferenças, roundest, rounder, usando, individual, sides, pontilhadas, claro, essa, apenas, sólidos, sólida, tracejada, fornece, especificam, efeitos, dependem, parecem, sutis, invisíveis, fina, semelhante, pelo, menos, clareza, elevada, relação, pressionada, oposto, projetar, está, esculpida, duas, linhas, paralelas, combinada, reta, simples, este, longe, comum, traços, curtos, pontos, redondos, significa, posicionadas, próprio, observe, último, parágrafo, quando, recebe, aplicam, aos, nessa, ordem, horária, multicolor, orange, darkblue, normalmente, escrevemos, essas, juntas, sozinha, funcionará, hexadecimal, ff0000, 255, usada, fornecer, até, fim, dimensionar, independentemente, exatamente, dois, sentido, horário, sozinho, visível, pois, especificada, unidade, comprimento, pixels, predefinidas, exato, dessas, critério, mas, rem, resultado, 8ebf42, ffff00, document, defini, individualmente, vez, deste, capítulo, percorre, opção, aparência, esta, deve, estar, presente, exibe, nenhuma, 2px, ingredientes, quase, desenhada, arestas, sua, formas, comuns, separar, visualmente, conteúdos, destacar, criar, interface, cards, campos, entrada, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, enabled, disabled, dir, default, checked, active, seletores, selectors, css3, guia, flexbox, guides, gradientes, nomes, sintaxe, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, mixer, converter, picker, general, cursos,

Text of the page (random words):
w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom css border como usar border width e border color em css valores de border style como dotted dashed solid double groove ridge inset e outset veja exemplos css border uma borda é uma linha desenhada ao redor das arestas da caixa de um elemento entre seu padding e sua margem as bordas são uma das formas mais comuns de separar visualmente conteúdos destacar uma caixa ou criar elementos de interface como cards botões e campos de entrada toda borda tem três ingredientes e você quase sempre define os três width a espessura da linha por exemplo 2px thin thick style a aparência da linha por exemplo solid dashed dotted esta é a única propriedade que deve estar presente sem um border style o navegador não exibe nenhuma borda mesmo que você defina uma largura e uma cor color a cor da linha por exemplo red 1c87c9 rgb 0 0 0 você pode defini los individualmente com border width border style e border color ou todos de uma vez com a propriedade abreviada border o restante deste capítulo percorre cada opção exemplo da propriedade border doctype html html head title title of the document title head body p style border 3px dotted 1c87c9 example with a blue dotted border p p style border 3px dashed ffff00 example with a yellow dashed border p p style border 3px solid 8ebf42 example with a green solid border p body html copiar experimente você mesmo resultado border width a propriedade border width define a largura de uma borda a largura pode ser especificada em uma unidade de comprimento como pixels px em ou rem também pode ser definida com uma das três palavras chave predefinidas thin medium ou thick o tamanho exato dessas palavras chave fica a critério do navegador mas thin medium thick você não pode usar border width sozinho não tem efeito visível sem um border style pois o estilo padrão é none sempre defina o estilo ou use a propriedade abreviada border primeiro você também pode fornecer até quatro valores para border width a fim de dimensionar cada lado independentemente exatamente como border style um valor define todos os lados dois definem superior inferior e esquerdo direito quatro definem superior direito inferior e esquerdo em sentido horário exemplo da propriedade border width doctype html html head style p border width 1 border style solid border width 6 px p border width 2 border style dotted border width 1 px p border width 3 border style dotted border width medium p border width 4 border style double border width 8 px p border width 5 border style double border width thick p border width 6 border style solid border width 3 px 12 px 6 px 18 px style head body h2 the border width property h2 p class border width 1 example with border width p p class border width 2 example with border width p p class border width 3 example with border width p p class border width 4 example with border width p p class border width 5 example with border width p p class border width 6 example with border width p body html copiar experimente você mesmo border color a propriedade border color é usada para definir a cor de uma borda a cor pode ser definida por nome especifica um nome de cor como red rgb especifica um valor rgb como rgb 255 0 0 hex especifica um valor hexadecimal como ff0000 você não pode usar a propriedade border color sozinha ela não funcionará use border style para definir as bordas primeiro normalmente escrevemos essas três propriedades juntas em uma única linha exemplo da propriedade border color doctype html html head style p color one border style solid border color blue p color two border style dotted border color yellow p color three border style solid border color darkblue orange green red style head body h2 the border color property h2 p class color one example with blue solid border color p p class color two example with yellow dotted border color p p class color three example with multicolor border color p body html copiar experimente você mesmo observe o último parágrafo quando border color recebe quatro valores eles se aplicam aos lados superior direito inferior e esquerdo nessa ordem horária border style a propriedade css border style define o estilo de todos os quatro lados das bordas de um elemento as bordas são posicionadas sobre o fundo do elemento ela pode ter de um a quatro valores portanto cada lado pode ter o seu próprio valor o valor padrão de border style é none border style tem os seguintes valores dotted dashed solid double groove ridge inset outset veja o que cada valor significa dotted uma série de pontos redondos dashed uma série de traços curtos solid uma linha reta simples este é de longe o estilo mais comum double duas linhas sólidas paralelas a largura combinada é igual ao valor de border width groove parece que a borda está esculpida na página efeito 3d ridge o oposto de groove a borda parece se projetar para fora inset faz toda a caixa parecer pressionada para dentro da página outset faz a caixa parecer elevada em relação à página os efeitos groove ridge inset e outset dependem da cor da borda por isso parecem sutis ou invisíveis em uma borda fina ou sobre um fundo semelhante use um border width de pelo menos 3px para vê los com clareza css border para lados individuais o css fornece propriedades que especificam cada borda direita esquerda inferior e superior a propriedade border style pode ter 4 valores por exemplo border style dotted solid double dashed onde a borda superior é pontilhada a borda inferior é dupla a borda direita é sólida e a borda esquerda é tracejada a propriedade border style pode ter 3 valores por exemplo border style dotted solid double onde a borda superior é pontilhada a borda inferior é dupla e as bordas direita e esquerda são sólidas a propriedade border style pode ter 2 valores por exemplo border style dotted solid onde as bordas direita e esquerda são sólidas e as bordas superior e inferior são pontilhadas e claro essa propriedade pode ter apenas 1 valor por exemplo border style solid onde todos os lados são sólidos exemplo das propriedades border para lados individuais doctype html html head style p border top style double border right style solid border bottom style dotted border left style groove style head body p example with border individual sides p body html copiar experimente você mesmo css border como propriedade abreviada a propriedade css border é uma propriedade abreviada para as seguintes propriedades de borda individuais a propriedade css border width que define a largura de todos os quatro lados da borda de um elemento a propriedade css border style que define o estilo de todos os quatro lados das bordas de um elemento a propriedade css border color que define a cor de todos os quatro lados da borda de um elemento exemplo da propriedade abreviada border doctype html html head style p border all border 3 px solid red p border left border left 4 px solid blue background color dcdcdc p border top border top 6 px solid green background color dcdcdc style head body h2 the border shorthand property h2 p class border all example with a shorthand property for border width border style and border color p p class border left example with a shorthand property for border left width border left style and border left color p p class border top example with a shorthand property for border top width border top style and border top color p body html copiar experimente você mesmo bordas arredondadas usando a propriedade css border radius você pode adicionar bordas arredondadas a um elemento exemplo da propriedade border radius doctype html html head style p normal border 3 px solid blue p round one border 3 px solid blue border radius 6 px p round two border 3 px solid blue border radius 9 px p round three border 3 px solid blue border radius 15 px style head body h2 the border radius property h2 p class normal example with normal border p p class round one example with round border p p class round two example with rounder border p p class round three example with roundest border p body html copiar experimente você mesmo a diferença entre bordas e outlines uma borda e um outline ambos desenham uma linha ao redor de um elemento por isso é fácil confundi los as principais diferenças são uma borda faz parte do modelo de caixa ela fica entre o padding e a margem e ocupa espaço portanto adicionar uma borda pode deslocar o layout dos elementos ao redor um outline é desenhado fora da borda e não ocupa espaço portanto nunca altera o tamanho ou a posição do elemento ou de seus vizinhos uma borda pode ter estilo largura e cor diferentes em cada lado um outline é igual nos quatro lados um outline pode ser deslocado do elemento com outline offset bordas não podem ser deslocadas como os outlines não afetam o layout eles são comumente usados para o estado focus de botões e links o anel de foco pode aparecer sem deslocar o restante da página capítulos relacionados css border width controle a espessura de cada lado css border style todos os estilos de linha em detalhes css border color defina cores por lado css border radius arredonde os cantos css outline a alternativa à borda que não impacta o layout css padding o espaço logo dentro da borda prática prática quais das seguintes são propriedades que podem ser usadas para estilizar bordas em css quais das seguintes são propriedades que podem ser usadas para estilizar bordas em css border style border color border radius border width border font verificar was this page helpful yes no previous tabelas css next css padding on this page css border border width border color border style css border para lados individuais css border como propriedade abreviada bordas arredondadas a diferença entre bordas e outlines capítulos relacionados prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferram...