What is preventing this button from having a border-radius?

The red border is just for visual reference. I attempted using overflow: hidden but it didn't yield the desired outcome. My goal is to achieve the same border radius as the red border. Is there something amiss in my approach? Appreciate your assistance.

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --violet: #8F00FF;
}

.rating {
    border: 1px solid red;
    border-radius: 8px;
    width: 30px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
}

button {
    border: none;
    border-radius: 8px;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    cursor: pointer;
    -webkit-border-radius:10px;
    overflow: hidden;
}

.rating span {
    display: flex;
    justify-content: center;
    color: var(--violet);
    font-weight: bold;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Interface</title>

    <!-- CSS Link -->
    <link rel="stylesheet" href="style.css">

    <!-- Boxicons -->
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e6d60667068646b486a6665667c">[email protected]</a>/dist/boxicons.js"></script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95ece1f4eef9ecfad3fffbfefff1cbddf4f2f4f8fbe792eebff2fcf4c0f1effadbb8cabfdd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- JS Link -->
    <script src="script.js" defer></script>
</head>
<body>
        
        <!-- <div class="single-card">
           

            
        </div> -->
    
        <div class="rating">
            <button>+</button>
            <span>12</span>
            <button>-</button>
        </div>
</body>
</html>

htmlcss

Answer №1

To ensure the .rating class has a hidden overflow, simply add overflow: hidden;.

.rating {
    ...
    overflow: hidden;
}

Alternatively, you can apply the !important rule to the border-radius property of the button element. This eliminates the need for the overflow property in the .rating class.

button {
 ...
 border-radius: 8px !important;
}


*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --violet: #8F00FF;
}

.rating {
    border: 1px solid red;
    border-radius: 8px;
    width: 30px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
    overflow: hidden;
}

button {
    border: none;
    border-radius: 8px !important;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    cursor: pointer;
}

.rating span {
    display: flex;
    justify-content: center;
    color: var(--violet);
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interface</title>

    <!-- CSS Link -->
    <link rel="stylesheet" href="style.css">

    <!-- Boxicons -->
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f4859535f5e4370021e011e04">[email protected]</a>/dist/boxicons.js"></script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6aa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- JS Link -->
    <script src="script.js" defer></script>
</head>
<body>
        
        <!-- <div class="single-card">
           

            
        </div> -->
    
        <div class="rating">
            <button>+</button>
            <span>12</span>
            <button>-</button>
        </div>
</body>
</html>

Answer №2

It is recommended that you include the following CSS rule: overflow: hidden for the .rating class to ensure complete coverage of the inner element with the border radius.

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --violet: #8F00FF;
}

.rating {
    border: 1px solid red;
    border-radius: 8px;
    width: 30px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
    overflow: hidden; /*This line was added*/
}

button {
    border: none;
    border-radius: 8px;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    cursor: pointer;
    -webkit-border-radius:10px;
    overflow: hidden;
}

.rating span {
    display: flex;
    justify-content: center;
    color: var(--violet);
    font-weight: bold;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Interface</title>

    <!-- Link to CSS file -->
    <link rel="stylesheet" href = "style.css">

    <script src "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7614190e1f15191805364458475842">[email protected]</a>/dist/boxicons.js"></ script>

    <link href="https://cdn.jsdelivr.net/npm/<a href = "/cdn-cgi/l/email-protection" class="__cf_ email__" data-cfemail = "3d5f5252494e494f5c4d7d08130f130f">[email protected]</a > / dist/css/bootstrap.min.css" rel = "stylesheet">

    & lt; !--Link to JS file-- >
    & lt; script src = "script.js" defer></ script>

Answer №3

The reason for this behavior can be attributed to the default styling in bootstrap, where the <button> tag is assigned a border-radius:0. Therefore, direct changes to the tags won't reflect visually as expected. Instead, creating a custom class for your button and applying it to the <button> tag will allow you to customize the border-radius.

*,*::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --violet: #8F00FF;
}

.rating {
    border: 1px solid red;
    border-radius: 8px;
    width: 30px;
    margin-left: 100px;
    margin-top: 100px;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
}

.button {
    border: none;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;    
}

.rating span {
    display: flex;
    justify-content: center;
    color: var(--violet);
    font-weight: bold;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interface</title>

    <!-- CSS Link -->
    <link rel="stylesheet" href="style.css">

    <!-- Boxicons -->
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a2730212b27262b083b412e223a292729">[email protected]</a>/dist/boxicons.js"></script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117121e155d584c55161e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- JS Link -->
    <script src="script.js" defer></script>
</head>
<body>
        
        <!-- <div class="single-card">
           

            
        </div> -->
    
        <div class="rating">
            <button class="button">+</button>
            <span>12</span>
            <button class="button">-</button>
        </div>
</body>
</html>

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

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

I'm currently working on a project that involves creating a webpage. I have a table, and when I execute the code, I notice that the center cell appears longer than the rest of the cells. table,td,tr{border: 1px solid red; } <!document html> ...

htmlcss

Tips on how to link images in an HTML file when it is being accessed locally on a host server

I am working on creating an HTML file that displays an image. My plan is to package the project into a zip folder and share it with someone who will run it on their local machine. Assuming I have an index.html file that includes an image called infographi ...

html

Styling a table in CSS to have top and bottom borders

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1 ...

htmlcss

Align text vertically within a link box by overriding inherited CSS styles

Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/ <a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> LCARS Locomotive O.S. </a> My issue pertains to the alignment of text within a graphic. I am utilizing this particular button ...

cssinheritance

Parsing HTML with Qt library isn't able to detect any elements

I am currently working on a web crawling application. Within the code, I have the following snippet: // Normally, the HTML content is retrieved from the web using QNetworkAccessManager & QNetworkReply: // QString htmlCode = this->reply->readAll( ...

c++htmlqthtml-parsing

Having trouble with the Tooltip feature in Bootstrap versions 5.2 and 5.3 on my end

I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected. When checking the ...

htmljquerycsstwitter-bootstrapbootstrap-5

Is there an h1 heading on this page?

Trying to enhance the accessibility of a website by properly setting up the headers. Running into issues with ensuring they are in the correct order. If there is code that could be applied across all pages to set h1 if it doesn't exist (promoting h2, ...

javascripthtml

Tips for aligning a row at the bottom within a nested column

Desired Outcome I am struggling to arrange two smaller images next to a larger image using Bootstrap 4. Specifically, I am having difficulty aligning one of the smaller images at the bottom so that it matches the alignment of the larger image. The layout ...

htmlcsstwitter-bootstrapbootstrap-4

Having trouble with implementing checkbox hack syntax

I'm trying to achieve a unique effect where a label gets styled and a div gets revealed when a checkbox is checked. Surprisingly, I've managed to make one happen without the other in my attempts. Even though the CSS is consistent in both instance ...

htmlcsscheckbox

Attempting to modify the background color of an iFrame in Internet Explorer

I am experiencing an issue with my webpage where the iFrame is displaying with a white background in IE, while it shows up with a blue background in Firefox and Chrome. I have attempted various solutions to make the background of the iframe blue or transpa ...

javascripthtmlcssinternet-exploreriframe

Guide to displaying database results in an HTML dropdown menu by utilizing AJAX technology

Greetings! As a newcomer to the realms of PHP and AJAX, I am currently on a quest to showcase the outcomes of a query within an HTML dropdown using AJAX. Let's delve into my PHP code: $pro1 = mysqli_query("select email from groups"); I made an attemp ...

javascriptphphtmljqueryajax

What is the process of performing numerical calculations using jQuery?

I need to deduct certain input values from the total price. Here's the code snippet: $('.calculate-resterend').click(function(e) { e.preventDefault(); var contant = $('.checkout-contant').val(); var pin = $('.che ...

javascriptjqueryhtml

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Recently, I created a webpage featuring a top fixed navbar and a CRUD datatable with pagination supported by buttons that trigger modals. However, I'm encountering an issue where upon clicking the delete button in the modal to remove a record, the mod ...

phphtmljqueryajaxmodal-dialog

Changing the look of your website with PHP and a drop-down selection bar

Recently, I implemented a drop-down menu that allows users to choose a theme for the website. While this feature works fine, I'm facing difficulty in loading the selected theme upon pressing the "Apply" button as I am fairly new to PHP. I am aware tha ...

phpcssformsdrop-down-menucookies

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...

htmlreactjs

Responsiveness of the element along the vertical axis

I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should. Thank you for your help! Check out how it looks currently This is my HTML co ...

htmlcssresponsive-designresponsiveness

Hover effects on the navigation bar combined with an image featuring a sub navigation menu

Looking to craft a dynamic navigation bar that switches out subcategory images on hover. (subcategories come pre-loaded with images) ...

jquerycsshtml

Close button for body

I have created a form that floats in the center of the screen On this form, I have included a button designed to close it However, I would like for the form to be closed anywhere on the screen when clicked with the mouse Here is my code: $(".offer-clo ...

javascriptjquerycssfacebox

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

htmlinternet-explorerfavicon

What is the most efficient way to gather all form inputs and then transmit them to an email address?

Could you please help me with creating a form page that collects user input data and sends it to my email? I am looking for solutions using only HTML, CSS, PHP, or JavaScript. Here is a preview of the page: Below is the PHP code snippet I've been wo ...

phphtmlcssbootstrap-4