buttonタグの角が丸くならない

実現したいこと

buttonタグの角を丸くしたいです。

問題点、エラーコード

buttonタグを使ってbuttonを作ったのですが、デザインするときにborder-radiousのプロパティーだけ効きません。
しらべてみたところ、buttonを丸くするには、以下の
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
という記述が必要だと目にしたので、記述してみましたが、変化ありませんでした。
お時間の許される方、回答お願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="responsive.css">
9   
10
11    <link rel="stylesheet" href="style.css">
12    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
13      <!-- Bootstrap CSS -->
14      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
15
16   
17    <title>airbnb</title>
18  </head>
19
20  <body>
21    <header>
22      <div class="header-container">
23        <ul class="header-li">
24         <li class="fab fa-airbnb"></li>
25         <li>概要</li>
26         <li>準備</li>
27         <li>安全</li>
28         <li>マネープラン</li>
29       </ul>
30       <button name="button" onclick="location.href='#'">はじめる</button>
31      </div>     
32    </header>

↓以下、doctorのリセットcssを記述していますが、省略しています。

css
1/*
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com
6Twitter: @rich_clark
7*/
8
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure,
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29
30body {
31    line-height:1;
32}
33
34article,aside,details,figcaption,figure,
35footer,header,hgroup,menu,nav,section {
36    display:block;
37}
38
39nav ul {
40    list-style:none;
41}
42
43blockquote, q {
44    quotes:none;
45}
46
47blockquote:before, blockquote:after,
48q:before, q:after {
49    content:'';
50    content:none;
51}
52
53a {
54    margin:0;
55    padding:0;
56    font-size:100%;
57    vertical-align:baseline;
58    background:transparent;
59}
60
61/* change colours to suit your needs */
62ins {
63    background-color:#ff9;
64    color:#000;
65    text-decoration:none;
66}
67
68/* change colours to suit your needs */
69mark {
70    background-color:#ff9;
71    color:#000;
72    font-style:italic;
73    font-weight:bold;
74}
75
76del {
77    text-decoration: line-through;
78}
79
80abbr[title], dfn[title] {
81    border-bottom:1px dotted;
82    cursor:help;
83}
84
85table {
86    border-collapse:collapse;
87    border-spacing:0;
88}
89
90/* change border colour to suit your needs */
91hr {
92    display:block;
93    height:1px;
94    border:0;  
95    border-top:1px solid #cccccc;
96    margin:1em 0;
97    padding:0;
98}
99
100input, select {
101    vertical-align:middle;
102}
103  height: 80px;
104}
105.header-container{
106  height: 80px;
107  display: flex;
108  flex-flow: row wrap;
109  justify-content: space-between;
110  align-items: center;
111}
112
113header ul {
114  list-style: none;
115  display: flex;
116  flex-flow: row wrap;
117  justify-content: space-around;
118  margin: 0%;
119}
120header ul li{
121  margin: 0 17px;
122}
123li.fab.fa-airbnb {
124  font-size: 30px;
125  color: #008489;
126}
127
128button{
129  -moz-appearance: none;
130  -webkit-appearance: none;
131  appearance: none;
132background-color: #DE1263;
133border-style: none;
134color: white;
135border-radius: 8px;
136padding: 10px 20px;
137}

m.ts10806

2020/10/09 04:31

>↓以下、doctorのリセットcss コードが半端だとこちらで現象確認できません。全て提示してください。あと、bootstrap使っているのであれば自前で用意しなくてもボタンの角丸はできます。前回の質問でアドバイスしたこと、まるっきり無視してませんか。

Sakupi

2020/10/09 09:37

返信遅くなり申し分けないです。リセットcss追加しました。なるほど、<a>タグ、bootstrap、buttonタグくらいがボタンを作れるバリエーションですか？ Bootstrapで、今一度試してみます！再び言わせてしまって申し分けないです。

m.ts10806

2020/10/09 09:41

コード読めば分かりますけど、 https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css .btn で検索。タグが指定されていないクラスなので、基本的にどの要素でもそれっぽい見た目になります。 bootstrap入れることを決めた時点で、全体的にBootstrapを主とした作りにしたほうが良いでしょう。ただ、airbnbはBootstrap使われてないようなので、「模写」されてるならそれでいいのかというのは１点ありますね。模写にしても構造設計は考えてからやるべきでしょう（フレームワーク使うならフレームワークのドキュメント読めないと使えるようにはなりません）

m.ts10806

2020/10/09 09:44 編集

何が言いたいかというと前回の質問が未解決のまま進んでいい状態じゃないんですよね。 https://teratail.com/questions/296862 結構大事なこと沢山書いてるのですけど、それらの考慮なしにボタンどうこうは言えません。物事には段取りがあります。必要な段取り抜かしたまま枝葉の細かいところばかり手を出しても根本的な問題はずっと残ったままです。

Sakupi

2020/10/09 11:55

丁寧なご指導、本当にありがとうございます！今後は軸をBootstrapにきちんと決めて細かなところをcssなどで埋めていく方針で行こうと思います。 Bootstrap使うなら、質問の前に、一度使えるドキュメントがあるか確認してみます！お時間撮らせて申し分け無いです。。プログラミング初めて1ヶ月もたたないうちに、このような指導を受けることができて、感謝しかないです！頑張ります！