{"id":511,"date":"2020-07-02T20:54:48","date_gmt":"2020-07-02T23:54:48","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=511"},"modified":"2022-12-09T08:37:20","modified_gmt":"2022-12-09T11:37:20","slug":"bordas-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/bordas-css\/","title":{"rendered":"Bordas CSS"},"content":{"rendered":"

As border propriedades CSS permitem especificar o estilo, a largura e a cor da borda de um elemento.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Estilo de borda CSS<\/strong><\/p>\n

A border-style propriedade especifica que tipo de borda a ser exibida.<\/p>\n

Os seguintes valores s\u00e3o permitidos:<\/p>\n

dotted<\/code> – Define uma borda pontilhada
\ndashed<\/code> – Define uma borda tracejada
\nsolid<\/code> – Define uma borda s\u00f3lida
\ndouble<\/code> – Define uma borda dupla
\ngroove<\/code>– Define uma borda ranhurada em 3D. O efeito depende do valor da cor da borda
\nridge<\/code>– Define uma borda sulcada em 3D. O efeito depende do valor da cor da borda
\ninset<\/code>– Define uma borda inserida em 3D. O efeito depende do valor da cor da borda
\noutset<\/code>– Define uma borda inicial 3D. O efeito depende do valor da cor da borda
\nnone<\/code> – Define sem borda
\nhidden<\/code> – Define uma borda oculta<\/p>\n

A border-style propriedade pode ter de um a quatro valores<\/p>\n

(para a borda superior, borda direita, borda inferior e borda esquerda).<\/p>\n

 <\/p>\n

p.dotted {border-style: dotted;}\r\np.dashed {border-style: dashed;}\r\np.solid {border-style: solid;}\r\np.double {border-style: double;}\r\np.groove {border-style: groove;}\r\np.ridge {border-style: ridge;}\r\np.inset {border-style: inset;}\r\np.outset {border-style: outset;}\r\np.none {border-style: none;}\r\np.hidden {border-style: hidden;}\r\np.mix {border-style: dotted dashed solid double;}<\/pre>\n
O resultado \u00e9<\/p>\n
\"\"<\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.dotted {border-style: dotted;}\r\np.dashed {border-style: dashed;}\r\np.solid {border-style: solid;}\r\np.double {border-style: double;}\r\np.groove {border-style: groove;}\r\np.ridge {border-style: ridge;}\r\np.inset {border-style: inset;}\r\np.outset {border-style: outset;}\r\np.none {border-style: none;}\r\np.hidden {border-style: hidden;}\r\np.mix {border-style: dotted dashed solid double;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The border-style Property<\/h2>\r\n<p>This property specifies what kind of border to display:<\/p>\r\n\r\n<p class=\"dotted\">A dotted border.<\/p>\r\n<p class=\"dashed\">A dashed border.<\/p>\r\n<p class=\"solid\">A solid border.<\/p>\r\n<p class=\"double\">A double border.<\/p>\r\n<p class=\"groove\">A groove border.<\/p>\r\n<p class=\"ridge\">A ridge border.<\/p>\r\n<p class=\"inset\">An inset border.<\/p>\r\n<p class=\"outset\">An outset border.<\/p>\r\n<p class=\"none\">No border.<\/p>\r\n<p class=\"hidden\">A hidden border.<\/p>\r\n<p class=\"mix\">A mixed border.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Largura da borda do CSS<\/strong><\/p>\n
A border-width propriedade especifica a largura das quatro bordas.<\/p>\n
A largura pode ser definida como um tamanho espec\u00edfico (em px, pt, cm, em, etc) ou usando um dos tr\u00eas valores predefinidos: fino, m\u00e9dio ou grosso:<\/p>\n
p.one {\r\n  border-style: solid;\r\n  border-width: 5px;\r\n}\r\n\r\np.two {\r\n  border-style: solid;\r\n  border-width: medium;\r\n}\r\n\r\np.three {\r\n  border-style: dotted;\r\n  border-width: 2px;\r\n}\r\n\r\np.four {\r\n  border-style: dotted;\r\n  border-width: thick;\r\n}<\/pre>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.one {\r\n  border-style: solid;\r\n  border-width: 5px;\r\n}\r\n\r\np.two {\r\n  border-style: solid;\r\n  border-width: medium;\r\n}\r\n\r\np.three {\r\n  border-style: dotted;\r\n  border-width: 2px;\r\n}\r\n\r\np.four {\r\n  border-style: dotted;\r\n  border-width: thick;\r\n}\r\n\r\np.five {\r\n  border-style: double;\r\n  border-width: 15px;\r\n}\r\n\r\np.six {\r\n  border-style: double;\r\n  border-width: thick;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The border-width Property<\/h2>\r\n<p>This property specifies the width of the four borders:<\/p>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n<p class=\"two\">Some text.<\/p>\r\n<p class=\"three\">Some text.<\/p>\r\n<p class=\"four\">Some text.<\/p>\r\n<p class=\"five\">Some text.<\/p>\r\n<p class=\"six\">Some text.<\/p>\r\n\r\n<p><b>Note:<\/b> The \"border-width\" property does not work if it is used alone. \r\nAlways specify the \"border-style\" property to set the borders first.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Cor da borda do CSS<\/strong><\/p>\n
A border-color propriedade \u00e9 usada para definir a cor das quatro bordas.<\/p>\n
A cor pode ser definida por:<\/p>\n
nome – especifique um nome de cor, como “vermelho”
\nHEX – especifique um valor HEX, como “# ff0000”
\nRGB – especifique um valor RGB, como “rgb (255,0,0)”
\nHSL – especifique um valor HSL, como “hsl (0, 100%, 50%)”
\ntransparente<\/p>\n
Nota: Se border-color n\u00e3o estiver definido, ele herdar\u00e1 a cor do elemento.<\/span><\/p>\n
p.one {\r\n  border-style: solid;\r\n  border-color: red;\r\n}\r\n\r\np.two {\r\n  border-style: solid;\r\n  border-color: green;\r\n}\r\n\r\np.three {\r\n  border-style: dotted;\r\n  border-color: blue;\r\n}<\/pre>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.one {\r\n  border-style: solid;\r\n  border-color: red;\r\n}\r\n\r\np.two {\r\n  border-style: solid;\r\n  border-color: green;\r\n} \r\n\r\np.three {\r\n  border-style: dotted;\r\n  border-color: blue;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The border-color Property<\/h2>\r\n<p>This property specifies the color of the four borders:<\/p>\r\n\r\n<p class=\"one\">A solid red border<\/p>\r\n<p class=\"two\">A solid green border<\/p>\r\n<p class=\"three\">A dotted blue border<\/p>\r\n\r\n<p>Nota: A propriedade \"border-color\" n\u00e3o funciona se for usada sozinha. Use a propriedade \"estilo de borda\" para definir as bordas primeiro.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Lados da borda do CSS<\/p>\n
Borda CSS – Lados individuais<\/strong>
\nNos exemplos das p\u00e1ginas anteriores, voc\u00ea viu que \u00e9 poss\u00edvel especificar uma borda diferente para cada lado.<\/p>\n
No CSS, tamb\u00e9m existem propriedades para especificar cada uma das bordas (superior, direita, inferior e esquerda):<\/p>\n
p {\r\n  border-top-style: dotted;\r\n  border-right-style: solid;\r\n  border-bottom-style: dotted;\r\n  border-left-style: solid;\r\n}<\/pre>\n
\"\"<\/p>\n
Ent\u00e3o, aqui est\u00e1 como isso funciona:<\/p>\n
Se a border-style propriedade tiver quatro valores:<\/p>\n
estilo de borda: pontilhado s\u00f3lido duplo tracejado;<\/strong>
\nborda superior \u00e9 pontilhada
\nborda direita \u00e9 s\u00f3lida
\nborda inferior \u00e9 dupla
\nborda esquerda \u00e9 tracejada
\nSe a border-style propriedade tiver tr\u00eas valores:<\/p>\n
estilo de borda: duplo s\u00f3lido pontilhado;<\/strong>
\nborda superior \u00e9 pontilhada
\nas bordas direita e esquerda s\u00e3o s\u00f3lidas
\nborda inferior \u00e9 dupla
\nSe a border-style propriedade tiver dois valores:<\/p>\n
estilo de borda: s\u00f3lido pontilhado;<\/strong>
\nas bordas superior e inferior s\u00e3o pontilhadas
\nas bordas direita e esquerda s\u00e3o s\u00f3lidas
\nSe a border-style propriedade tiver um valor:<\/p>\n
estilo de borda: pontilhado;<\/strong>
\ntodas as quatro bordas s\u00e3o pontilhadas<\/p>\n
Bordas arredondadas CSS<\/h2>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.normal {\r\n  border: 2px solid red;\r\n}\r\n\r\np.round1 {\r\n  border: 2px solid red;\r\n  border-radius: 5px;\r\n}\r\n\r\np.round2 {\r\n  border: 2px solid red;\r\n  border-radius: 8px;\r\n}\r\n\r\np.round3 {\r\n  border: 2px solid red;\r\n  border-radius: 12px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The border-radius Property<\/h2>\r\n<p>This property is used to add rounded borders to an element:<\/p>\r\n\r\n<p class=\"normal\">Normal border<\/p>\r\n<p class=\"round1\">Round border<\/p>\r\n<p class=\"round2\">Rounder border<\/p>\r\n<p class=\"round3\">Roundest border<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n