Arrondir les angles d une DIV

1 pièce(s) jointe(s)

Bonjour

J essaye d arrondir les angles d un element mais il se passe que 3 angles sont arrondis

Pièce jointe 626773

mon code
Code:

1 2 3 4 5 6 7 8 9 10 .head{ width:70%; background: #909090; margin: auto; border-radius:12px; margin-top: 20px; margin-bottom: 25px; }
mon ami :google:me donne comme element de reponse ca:

Code:

border-radius:12px 12px 12px 12px;

mais rien n y fait

Pourrais-je avoir une explication?

Bonjour,

Vous utilisez un pseudo :before pour le .head ?

Non
voici mon code css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
 
 
 
body{
    background-color: #696969;
    cursor:url("images/42.svg"),move;
    }
 
header{
        display:flex;
        justify-content: flex-start;
 
    }
    .head{
      display: inline;
        width:85%;
        height: 5%;
        background:#909090;
        margin: auto;
       border-radius:12px;
       margin-top: 20px;
       margin-bottom: 25px;
       box-shadow: 10px 10px 10px black;
           }  
 
      .day{
       padding: 10px 10px;
      }     
 
  .loupe{
    margin-left:95px;
    position:relative;
 
  } 
 
.reload{
    position:relative;
    top: 0px;
    right: 0px;
 
}
 
.close{
    position:relative; 
    bottom: 0px;
    right: 0px;
}
 
 
    .container{
 
        display: flex;
 
    }
 
    .cluster{
 
        flex:2;
        order:2;
        min-height: 80vh;
        flex-direction: column;
        background-color:#C0C0C0;
        height:65%;
       padding: 1% 1%;
       border-radius: 12px;
       box-shadow: 12px 12px 12px black;
       margin-bottom: 20px;
 
    }
 
    .left_sidebar{
    display:flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
        flex: 1;
        order:1;
        background-color:#C0C0C0;
        height:7%;
        width:5%;
        border-radius: 12px;
       box-shadow: 12px 12px 12px black;
       margin-left: 8%;
       margin-right:1%;
       padding: 8px;
 
    }
 
    .right_sidebar{
        display:flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
        flex: 1;
        order:3;
        background-color:#C0C0C0;
        height:7%;
        width:5%;
        border-radius: 12px;
       box-shadow: 12px 12px 12px black;
       margin-right:8%;
       margin-left:1%;
       padding: 8px;
    }
 
    .pictures{
        display: block;
    }
 
}
 
.container{
 
    display: flex;
 
}
 
.cluster{
 
    flex:2;
    order:2;
    min-height: 80vh;
    flex-direction: column;
 
}
 
.left_sidebar{
 
    flex: 1;
    order:1;
}
 
.right_sidebar{
    flex: 1;
    order:3;
}
 
.pictures{
    display: block;
}

Ben si, la première ligne de votre code CSS applique les pseudos :before et :after sur tous les éléments html.

Essayez de redéfinir le pseudo before sur le .head ou bien l'appliquer un overflow:hidden.