it is not possible to define the button border style using css

Encountering an unusual issue, where I am able to customize the color, font-size, and background of a button using CSS, but unable to set its border. Below is the HTML and CSS code snippet:

.btn-general {
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 0;
  padding: 12px 26px 12px 26px;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase !important;
}

.btn-white {
  border-color: #fff;
  color: #fff;
}
<section id="home">

  <div id="home-cover">

    <div id="home-content-box">

      <div id="home-content-box-inner">

        <div id="home-heading">

          <h3>Watch Out<br>The Modern Responsive Website!</h3>

        </div>

        <div id="home-btn">
          <a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
        </div>

      </div>

    </div>

  </div>

</section>

css

Answer №1

Make sure to place your CSS inside the Style Tag

<style>
    .btn-general{
    border-width:2px !important;
    border-style: solid !important;
    border-radius: 0;
    padding: 12px 26px 12px 26px;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase !important;
    }

    .btn-white{
    border-color: #fff;
    color: #fff;
    }
    </style>

Remember: Always include CSS at the top of your HTML document 

<div id="home-cover">

            <div id="home-content-box">

                <div id="home-content-box-inner">

                    <div id="home-heading">

                        <h3>Check Out<br>The Sleek Responsive Website!</h3>

                    </div>

                    <div id="home-btn">
                        <a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="Explore Our Work">Explore Our Work</a>
                    </div>

                </div>

            </div>

        </div>

    </section>

Answer №2

Your border-color was originally set to white, which is why you couldn't see it. I've updated it to a darker color so that it's visible to you.

.btn-general{
border-width:2px !important;
border-style: solid !important;
border-color: #3333ff;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;

}

.btn-white{
color: #222;

border-color: #222;
}
<section id="home">

        <div id="home-cover">

            <div id="home-content-box">

                <div id="home-content-box-inner">

                    <div id="home-heading">

                        <h3>Check Out<br>The Latest Responsive Website!</h3>

                    </div>

                    <div id="home-btn">
                        <a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="Browse Our Work">Browse Our Work</a>
                    </div>

                </div>

            </div>

        </div>

    </section>

I hope this makes things clearer for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending the servlet response back to the original JSP page

Is there a way to display the message "File uploaded successfully" on the upload.jsp page? The page retrieves session attributes, checks the user's department, and acknowledges users by displaying the name of their department. When users upload files ...

javahtmlcssjsp

How to align text to the bottom of a div using CSS

I am struggling to position the text 'About' at the bottom of an image. The red line marks the spot where I want the text aligned at the bottom. However, every method I try results in inconsistent outcomes when viewed on desktop and mobile device ...

htmlcss

Styling input[type='date'] for non-Chrome browsers with CSS

Looking for the css equivalent of: ::-webkit-datetime-edit ::-webkit-datetime-edit-fields-wrapper ::-webkit-datetime-edit-text ::-webkit-datetime-edit-month-field ::-webkit-datetime-edit-day-field ::-webkit-datetime-edit-year-field ::-webkit-inner-spin-bu ...

cssdatefirefoxinputmicrosoft-edge

Inequality in spacing between Bootstrap columns

I am currently working on a website where the home page has columns with icons and text. The issue arises on mobile devices as the columns stack unevenly due to varying text lengths, resulting in inconsistent vertical spacing. Is there a way to ensure cons ...

cssbootstrap-4

Achieve vertical center alignment of elements within the sticky-top class using Bootstrap 4

I have been attempting to center elements within a div using the sticky-top class, but so far, I have not been successful. I have tried using the following classes: d-flex justify-content-center align-items-center flex-column body, html { height: 100 ...

htmlcssbootstrap-4

Using animate.css and jQuery for sequential animations

Is there a way to make them fadeInUp one after the other? Check out the demo http://jsfiddle.net/uz2rm8jy/4/ Here is the HTML structure: <div class="c one"></div> <div class="c two"></div> <div class="c three"></div> ...

javascriptjquerycss

Styling on a device can vary from how it appears on a

Using Ionic2, I have an application with messages. In a browser, the message appears like this: https://i.stack.imgur.com/SyCtM.png However, when running on either an Android or iOS device, it looks different: https://i.stack.imgur.com/i0RdO.png The di ...

htmlcsssassionic2

What is the best way to center a navbar vertically inside a div?

I've come across some posts mentioning the need for a container with h-100 to align items using the align-self class. However, I'm facing issues aligning a navbar at the bottom of a div. When I place the navbar within another container and row, i ...

htmlcsstwitter-bootstrapbootstrap-4

Attempting to fill a template using ngfor, wherein the initial 2 elements are displayed in a row

I am attempting to complete a task where, using an ngFor directive to iterate through an array, I need to display the first 2 elements in a row and the remaining elements in a descending column. It should look like this: first second third fourth fifth ...

htmlcssangularfor-loop

Model not displaying on Apexcharts

Currently, I am using Angular-15 and Bootstrap-5 application for the Apexchart The issue arises when trying to open the Model and the chart does not show up. If I refresh the page and zoom out to 90% or zoom in to 100%, the chart appears. However, upon re ...

cssangulartypescriptapexchartsangular15

Are CSS generated elements limited to text content only?

Can CSS generated content be used for more than just text? Take for example the code snippet below, where the span is displayed as text rather than creating a new span element. .addbefore:before { content: "<span>dfsd</span>"; } ...

css

Hover Effect: Inner Border Style Applied to Image Using CSS

I've been on the hunt for a straightforward hover effect to use on images in a gallery. I'm looking for something simple that will add a slight 10px width, 40% transparency to the images. While many tutorials show how to achieve this effect on a ...

cssimagehoverborder

List with bullet points and check marks aligned to the left and outside the text, in a vertical layout

I'm attempting to create a bulleted list with checkmarks where the text aligns on the left without the second line floating beneath the checkmarks. Does anyone have a solution for this? ...

htmlcsshtml-lists

I have noticed that there are 3 images following the same logical sequence, however only the first 2 images seem to be functioning correctly. Can you help

Update: I have found a solution that works. You can check it out here: https://codepen.io/kristianBan/pen/RwNdRMO I have a scenario with 3 images where clicking on one should give it a red outline while removing any outline from the other two. The first t ...

javascripthtmlcssfrontendweb-frontend

Tips for concealing and substituting the navbar-toggler-icon in Bootstrap 4

Is there a way to hide and replace the navbar-toggler-icon in Bootstrap 4? Currently, the code I have just displays an 'X' below the hamburger menu. <nav class="navbar navbar-toggleable-md"> <button class="navbar-toggler navbar-toggle ...

csshtmlbootstrap-4twitter-bootstrap-4

Struggling to align materialUI input or textfield horizontally

import {Input} from 'material-ui'; import Select from 'react-select'; I've been trying different ways to adjust the margins and padding, even wrapping them in divs, but I can't seem to get Material UI textfield or input alig ...

cssreactjsmaterial-ui

Select options with disabled sorting feature

Is there a way to use CSS to sort disabled options in a select element? I would like all disabled options to appear at the bottom, with enabled options at the top. In the screenshot attached, you can see that enabled options are black and disabled options ...

htmlcss

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add

My current Wordpress blog displays 20 posts. I am looking to apply a specific class to posts numbered 2 through 10, and then again from 12 to 20. I do not want the first post or post number 11 to have this class added. I attempted using CSS selectors lik ...

jquerycsswordpress

Is it possible to develop Hybrid Apps specifically for Windows Tablets/Surface devices?

We have created a Hybrid App for Android devices and made it compatible with Windows by using Adobe PhoneGap Build to generate a .XAP package from the existing Source Code. We believe that this .XAP package can easily be deployed on a Windows Mobile devic ...

androidwindowshtmlcsscordova