Pré-visualização da Borda
Controle de Bordas
Ajuste os controles acima para personalizar a borda. Selecione o estilo desejado, ajuste a espessura da borda usando o controle deslizante e escolha a cor que melhor se adapta ao seu design. A pré-visualização exibirá as mudanças em tempo real.
Exemplos de Propriedades CSS - Bordas
border-style - Define o estilo da borda. Os valores possíveis são:
solid- Borda sólidadashed- Borda tracejadadotted- Borda pontilhadadouble- Borda duplagroove- Borda entalhada
border-style: solid;
border-width - Define a espessura da borda. O valor pode ser em pixels ou outras unidades.
border-width: 5px;
border-color - Define a cor da borda. Pode ser uma cor em formato hexadecimal, RGB ou nome da cor.
border-color: #ff0000;
border-radius - Aplica bordas arredondadas aos cantos do elemento. O valor é dado em pixels ou outras unidades.
border-radius: 10px;
border - Propriedade abreviada para definir estilo, largura e cor da borda de uma vez.
border: 2px solid #000;
border-top - Define uma borda apenas na parte superior do elemento.
border-top: 3px dashed #008000;
border-right - Define uma borda apenas na parte direita do elemento.
border-right: 4px dotted blue;
border-bottom - Define uma borda apenas na parte inferior do elemento.
border-bottom: 5px double #ff6347;
border-left - Define uma borda apenas na parte esquerda do elemento.
border-left: 6px solid #9932cc;