Problème de border avec avec css

le_big_dee
Les bases HTML/CSS

Bonjour à tous, j'ai une div appelé conteneur a qui j'ai attribué des valeurs au border-width et au border-color,
lorsque j'ouvre mon inspecteur je constate que ces valeurs ont bel et bien été prises en compte sauf que visuelement je ne vois rien et je ne sais pas ce qu'il se passe, merci d'avance

.conteneur{

width: 500px;
display: flex;
border-radius:30px;
overflow:hidden;
scroll-snap-type: x mandatory;
position: relative;
top: 100px;
left: 100px;
border-width:2px;
border-color:blue;}

Ce que je veux

avoir des bordures bleu

Ce que j'obtiens

visuelement rien

3 réponses

Cosmos506

Salut,

Ton code ne marche pas car tu n'as pas défini le border-style ^^

dans ton cas et en arrangeant ton code ça donne :


.conteneur{

width: 500px;
display: flex;
border-width:2px;
border-style:solid;
border-color:blue;
border-radius:30px;
overflow:hidden;
scroll-snap-type: x mandatory;
position: relative;
top: 100px;
left: 100px;
}

tu as une autre solution pour le border : au lieu de définir tes paramètres 1 par 1 fait le comme ça :


.conteneur {
border : 2px solid blue;
border-radius:30px;
}

Bonne soirée,
Cosmos

popotte

Hello :)

Alors il faut que tu ajoutes en tête de ton fichier css:

* {
    box-sizing: border-box;
}

ça va faire en srte que ton border se place dans le container et pas en dehors (en gros ça fonctionnera comme un padding plutot que comme un margin, ça règlera aussi les problèmes de débordements)

En gros ton border se trouve en dehor de ta div, tu as placé un overflow: hidden qui cache tout ce qui dépasse de la div, avec le box-sizing ta bordure sera à l'intérieur et donc ne sera plus impacté par l'overflow

Sinon ajoutes aussi border-style: solid;, sinon tu as une version courte proposée par CSS: border: 2px solid blue;

le_big_dee
Auteur

Merci infiniment de ton aide

popotte

De rien ;)