Does border-padding actually exist in web design?

Looking for some assistance with styling two SVG icons. I've applied padding and now want to round the edges using border-radius, but it seems that no matter what padding amount I use, the SVGs get cut off.

Here's an example of the issue with 10px padding and 50% border-radius: https://i.sstatic.net/WsglA.png

And this is how the SVG normally looks: https://i.sstatic.net/831mz.png

I've tried different padding sizes without success. Research led me to only unrelated topics like Link 1 and experimenting with border-block-start mentioned in Link 2. Any ideas on how to solve this issue?

htmlcsssassfrontendpadding

Answer №1

Here is the information I was referring to. I'm not sure if this is what you were looking for.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, blue, green);
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 65%;
    border-radius: 23px;
    object-fit: contain;
    overflow: hidden;
    
}

.img-container > img {
    height: 138%;
    width: 149%;
 }
<div class="container">
  <div class="img-container">
    <img src="https://i.sstatic.net/831mz.png">
  </div>
</div>

Answer №2

If you're looking to create a customized SVG camera icon with numbers inside, I have a simple solution for you. I once needed the same thing and discovered a great website that allows you to easily design custom SVG graphics. You can import an existing SVG file into the program and make any necessary edits or add your own styling and drawings.

Check out the website here: . Once on the site, click on 'Explore editor' at the top right corner.

You'll be able to create your SVG with precise spacing and rounded edges/borders to suit your needs perfectly.

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

Unable to define an object within the *ngFor loop in Angular

In order to iterate through custom controls, I am using the following code. These controls require certain information such as index and position in the structure, so I am passing a config object to keep everything organized. <div *ngFor="let thing of ...

javascripthtmlangulartypescript

What is the best way to switch text color when the background changes?

Is there a way to dynamically change the color of a text logo to make it readable over differently colored backgrounds, such as on a slider or scroll down effect? While one approach could involve finding the dominant image color, this may be slow and ineff ...

javascriptjqueryhtmlcss

Order verification through the browser's geolocation API

How does the Geolocation Browser API detect a visitor's location? According to the W3C Geolocation info site, the API utilizes a combination of IP, Wi-Fi, Cell-Phone, and GPS to determine a user's location, but it is not specified in what order ...

javascripthtmlbrowsergeolocation

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

javascriptcssreactjsanimationstyled-components

How can you avoid an abrupt transition when using `ng-hide` for animations?

I've been working on an accordion animation using ng-hide based on the panels height. However, I've noticed a slight jump when the ng-hide is applied. (click on the first title to show and hide) Can anyone offer assistance in resolving this issu ...

cssangularjs

What is the best way to extract data from a text file in order to access the values in a dynamic HTML

After successfully generating a dynamic HTML table that takes input values using HTML and JavaScript functions, I am now looking to plot a graph with the values from the table. The challenge is to insert these values into the table from an external text fi ...

javascriptphphtmljsongetjson

What is the appropriate conversion for a CSS property name starting with -webkit when working with React?

For example, using `-webkit-text-fill-color` resulted in an error when setting it to `'red'`, stating "Using kebab-case for CSS properties in objects is not supported. Did you mean WebkitTextFillColor?" I have attempted `WebkitTextFillColor`, `w ...

cssreactjswebkitkebab-case

Users are directed to various pages based on their specific roles

I am currently working on implementing a simple authorization system using an array to simulate a database. Let's say I have an array with information about two individuals: const users = [{ info: 'First person', login: &apos ...

htmlnode.jsformsexpressaction

I'm struggling to grasp the concept of the Bootstrap exercise

Being a new student can be challenging, especially when faced with a teacher who struggles to explain concepts clearly. Despite having only 4 weeks of school, I find myself unable to complete the exercises as I lack the necessary guidance. Could someone k ...

htmlcssbootstrap-4

Implementing CSS for preventing text from overlapping with images

I have designed an image that includes some accompanying text, as depicted in the figure below. <span class="productname ">Beautiful Creations</span> <img src="xy.jpg" data-attr="productimg" class="producti ...

htmlcss

Angular, PHP, and MySQL working together to establish database connectivity

Greetings! I am facing some challenges with a small project involving mySQL and PHP for the first time. My main focus right now is on establishing connectivity. Despite following various tutorials, I have been unable to connect to the database and keep enc ...

javascriptphphtmlmysqlangularjs

"Troubleshooting: The Challenge of a Persistent Footer's

I came across a sticky footer that met my needs, but now I am facing an issue. When I increase the resolution beyond my normal setting, the code works fine but there is spacing between the container div and the footer div. I have attached a screenshot to s ...

jqueryhtmlcsstwitter-bootstrapsticky-footer

The Gridsome website deployed on Netlify seems to be experiencing some issues. When clicking on links, the pages are not loading properly despite

After deploying my site on Netlify, I encountered an issue where the URL updates when clicking on links on the landing page, but the content does not show unless the page is refreshed. Interestingly, this issue does not occur on my local development server ...

javascriptvue.jsfrontendnetlifygridsome

Add CSS styling to a single form

When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...

htmlcss

Deactivate a few CSS guidelines

For my project, I am incorporating interfaces within other interfaces and have been facing conflicts between bootstrap rules and other CSS files. To address this, I encapsulated all Bootstrap rules within a .use_bootstrap class. Now, within my interfaces ...

htmlcsstwitter-bootstrapcss-selectors

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

javascriptcssreactjsmaterial-ui

``Consolidate and modify multiple records at once with a single click

Take a look at this code snippet for creating a table: while($record=mysql_fetch_array($myData) ) { echo "<form action=mydata3.php method=post>"; echo"<tr>"; echo "<td>" . $record['Id'] . "</td>"; echo "& ...

phphtmlmysql

Load images in advance using the link tag to eliminate the warning (html/Javascript)

After attempting to insert <link rel="preload" as="image" href="path"> into the <head>, I received a warning in the console. {path to image} was preloaded using link preload but not used within a few seconds from t ...

javascripthtmlangulartypescriptconsole

What is the method to showcase content by category with a button click within the same page using Django?

I am currently working on a portfolio project where I need to categorize the projects based on their categories. I have added buttons for each category and I want to display the contents of each category below the respective button when clicked. For exampl ...

pythonhtmldjangodjango-modelsdjango-templates

Adjust the size of the window to prevent the text from shifting

How can I lock text and tables in place when resizing the window? Can someone provide an example? ...

htmlcss